Flex：将max-height应用于子元素，同时防止其占用不需要的空间

Question

I have a flex container with 2 child elements, sharing the same space ( flex-grow: 1 ). Each of them has overflow: auto set. They look like this:

The idea is the following:

• if the 2 children have enough content, keep both child elements at the max-height of 50% of the parent
• if the first child has less content, though, shrink it to its content; basically make sure it doesn't use the 50% of the parent if it doesn't need to
• the second child always occupies the rest of the parent's space

So, in the case shown above, I really want this:

I am aware of the flex-shrink property in CSS, I've tried to use it but I must be doing it wrong. Any help?

The code: ( jsfiddle )

HTML

<div id="container">
  <div class="child one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
  <div class="child two">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>

CSS

#container {
  width: 200px;
  height: 300px;
  display:flex;
  flex-direction: column;
}

.child {
  max-height: 50%;
  height: 100%;
  flex-grow: 1;
  overflow: auto;
}

.one {
  background-color: #6799d2;
  max-height: 19%;
}

.two {
  background-color: #67d375;
}

Answer 1

Set the maximum height of the children, don't allow them to grow but allow them to shrink when possible.

 #container { width: 200px; height: 300px; display:flex; flex-direction: column; } .one { background-color: #6799d2; max-height: 50%; flex-shrink: 1; } .two { background-color: #67d375; flex-grow: 1; overflow: auto; } 

 <div id="container"> <div class="child one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div> <div class="child two">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> </div> 

Answer 2

You can give the second one a max-height of 100%:

.two {
  max-height: 100%
}

Is that what you are looking for?