Match column height to dynamic sibling

Question

I have two columns. The left column should dictate the height of the right column, but its own height will vary. If the left column has more items, the right column should grow to match it. If the right column has more items, it should stop at the height of the left column, then scroll.

I have tried playing around with flexbox and can't seem to get it to work how I'd like. I know I can do this with javascript but I'm sure there's got to be a purely css solution that I'm just not finding.

Here's what I have currently:

<div class="row" style="display: flex;">
    <div class="col-xs-12" style="flex: 0 0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Panel 1 header</div>
            <div class="panel-body" style="background-color: red;">
                <ul>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-xs-12" style="flex: 0 0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Panel 2 header</div>
            <div class="panel-body" style="background-color: blue;">
                <ul>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>scroll</li>
                    <li>scroll</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Looks like this is a duplicate but the accepted answer there is probably not the one you want, the 2nd one is I think: https://stackoverflow.com/a/49065029/33822 — willoller, Jun 13 '19 at 17:16
today : display: table/flex or grid are easy options, before inline-block or float with the faux-column methode https://alistapart.com/article/fauxcolumns/ This might be the most asked question on the Web about CSS .... how could you not find clues ? — G-Cyrillus, Jun 13 '19 at 18:26

score 0 · Answer 1 · answered Jun 13 '19 at 17:07

I've put together a working sample for you to reference. The point here is to use display: flex, and it will solve your issues:

* {
  box-sizing: border-box;
}
.container {
  background: pink;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px;
}
.container .box {
  background: lightblue;
  padding: 10px;
  flex: 0 0 auto;
  width: 50%;
}

<div class="container">
  <div class="box">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae asperiores dolorem iure quas repellat quibusdam accusantium odit unde rem autem.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt voluptatum unde nesciunt consequatur ipsa voluptas et nemo. Alias eum, culpa labore fugiat veniam vero nemo aut cumque animi, consequatur temporibus sed officia. Officia quis veniam laudantium deserunt sit adipisci labore mollitia quo perspiciatis facere. Voluptatem fugiat rem temporibus consequuntur quidem!</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente sint corrupti alias at enim, inventore iure similique quis quod veritatis eaque est ab aliquam incidunt officia, neque veniam. Molestiae, voluptates repellat alias incidunt voluptas culpa temporibus ad saepe laudantium vel!</p>
  </div>
</div>

Match column height to dynamic sibling

1 Answers1