HTML CSS Equal Div Height

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS - Make parent & Child div's equal height

Flexbox example:

No need for a table for this!

Edit: Updated to match requirements. Play with the (shorthanded flex-basis) 20% and min-width of 250px on .image to fit your taste. Note that I set the background image through style as I assume it will come from a back-end.

Perhaps you also want a min-height on your main container.

.block {

  display: flex;

}

.image {

  flex: 0 1 20%;

  min-width: 250px;

  background: #f00;

  color: #fff;

  

  background-size: cover;

  background-position: 50% 50%;

}

.image img {

  display: block;

  width: 100%;

  height: auto;

}

.content {

  display: flex;

  flex-direction: column;

  flex: 1;

}

.boxes {

  display: flex;

  flex: 1;

}

.box1 {

  background: cyan;

  flex: 1;

}

.box2 {

  background: yellow;

  flex: 1;

}

.description {

  flex: 1;

  background: #531777;

  color: #fff;

}

<div class="block">

  <div class="image" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/c8/e8/cc/c8e8cc83e6eeb60061ba11c9d8ba9a11.jpg')">

  </div>

  <div class="content">

    <div class="boxes">

      <div class="box box1">

        .box1

      </div>

      <div class="box box2">

        .box2

      </div>

    </div>

    <div class="description">

      .description

      <br>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis sed augue eu pulvinar. Cras sodales tortor ac mauris bibendum, quis sagittis quam viverra. Aliquam erat volutpat. Pellentesque ullamcorper porta metus, nec efficitur lorem vulputate quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel dui et eros gravida bibendum. Nunc pulvinar commodo facilisis.

    </div>

  </div>

</div>

One flex/grid item sets the size limit for siblings

Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.

main {

  display: flex;

}

section {

  display: flex;

  flex-direction: column;

  width: 7em;

  border: thin solid black;

  margin: 1em;

}

:not(.limiter)>div {

  flex-basis: 0px;

  flex-grow: 1;

  overflow-y: auto;

}

<main>

  <section>

    <div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text

      in flow text in flow text in flow text in flow text in flow text in flow text in</div>

  </section>

  <section class="limiter">

    <div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>

  </section>

  <section>

    <div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>

  </section>

</main>

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {

  display: grid;

  grid-auto-flow: column;

  gap: 5%;

}

.col {

  border: solid;

}

<div class="row">

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>

</div>

Is there a CSS only solution to make divs equal height in a vertical grid?

You can use a wrapping flexbox - see how the heights are auto-adjusted (due to the align-items:stretch property which is default) when the child divs wrap as you resize the window.

* {

  box-sizing: border-box;

}

body {

  margin: 0;

}

.wrapper {

  display: flex;

  flex-flow: row wrap;

}

.wrapper > div {

  border: 1px solid red;

}

<div class="wrapper">

  <div>

    some text here some text here

  </div>

  <div>

    some text here

    <br/>more text here

  </div>

  <div>

    some text here

    <br/>more text here and some more and some more

  </div>

  <div>

    some text here

    <br/>more text here

    <br/>more text here

  </div>

</div>

Equal height columns in css except one column

You can make the top ribbon to be absolute position and rely on flexbox for the remaining to have equal height:

* {

 box-sizing:border-box;

}

body {

  background-color: #a3d5d3;

}

.container {

  display: flex;

}

.some {

  margin-top:50px;

  margin-right: 30px;

  position:relative;

}

.recommended {

  position:absolute;

  background-color: yellow;

  left:0px;

  right:0px;

  height: 40px;

  top:-40px;

  padding: 5px 10px;

}

.one {

  background-color: transparent;

}

.box {

  width: 200px;

  height:100%;

  background-color: green;

  padding: 10px;

}

<div class="container">

  <div class="some">

    <div class="recommended one"></div>

    <div class="box">

      foo<br> bar

      <br> foo bar

      <br> foo  bar

      <br>

    </div>

  </div>

  <div class="some">

    <div class="recommended">Recommended Card</div>

    <div class="box">

      foo<br>

    </div>

  </div>

  <div class="some">

    <div class="recommended one"></div>

    <div class="box">

      foo<br> bar

    </div>

  </div>

</div>