1

I'm trying to make two divs have an equal height, and that can be done with flexbox pretty nicely using something like this:

section {
  display: flex; /* establish flex container */
}

/* non-essential decorative styles */
section {
    margin: 0;    
    padding: 0;
    border: 1px solid #777;
    background-color: yellow;
}

div {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    margin: 5px;
    display: flex;
}

And 

<section>
  <div>1</div>
  <div>2<br/>2<br/>2</div>
</section>

But this just makes the smaller div grow to match the height of the taller one. I want to have the opposite where the larger one will shrink to the height of the smaller and hide the overflow (I need to add a scrollbar or some button to expand). Is there any way to do this without adding a fixed height? Fixed height is an non-ideal solution since I can't guarantee the height of the smaller div will always be the same and I want the content of the two divs to line up.

Scott Finlay
  • 86
  • 1
  • 5
  • No, I don’t see that being possible without a fixed height, if you want to use CSS only. I think you will need a JS solution that measures the actual content heights, and then sets the height explicitly. – CBroe Aug 17 '16 at 08:50
  • Also - http://stackoverflow.com/questions/38852811/create-a-row-of-flexbox-items-with-a-max-height-defined-by-one-child/38852981#38852981 – Paulie_D Aug 17 '16 at 09:46

0 Answers0