How to have two sub-divs the same height as each other


Tags: html,css

Problem :

I need to make two .tinted-containers the same height as each other (using CSS if possible) but each one is under a grid column.

  • I can't tint the grid columns because they use padding to create the gutters and I'd have no white space between the tinted containers if I tint the background.
  • It's a %-based grid so adding a margin to both columns takes the width to over 100%.

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

How can I make the containers the same height?



Solution :

Flexbox can do that:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.grid-row {
  display: flex;
}
.grid-column-half {
  border: 1px solid grey;
  width: 50%;
  padding: 10px
}
.tinted-container {
  height: 100%;
  background: pink;
}
<div class="grid-row">
  <div class="grid-column-half">
    <div class="tinted-container">
      <p>Taller</p>
      <p>column</p>
      <p>on</p>
      <p>left</p>
    </div>
  </div>

  <div class="grid-column-half">
    <div class="tinted-container">
      <p>This container should be the same height as the other one.</p>
    </div>
  </div>
</div>


    CSS Howto..

    How to reverse z-index on stacked divs

    How can I get the dots that surround some elements to go away/become solid lines?

    CSS - how to put divs in the correct position on a webpage [closed]

    How to make a sliding dashboard similar to medium.com? [closed]

    contenteditable does not show pseudoselector :before in safari

    How to write regex to extract specific key format and value from CSS file?

    How to make a tetrahedron?

    How to hide a div on certain pages using CSS

    How To Apply CSS rule to Classes with Specific Keywords Inside Them?

    How to style default confirm box with only css?

    How to define the css :focus state in a jQuery selector?

    How to position divs inline with same spacing

    How to remove all css classes of all items of a
    with jQuery?

    How to equal height of