Let's me try to explain the issue.
Assume we have 2 flex box boxOrange
and boxPurpule
who share the full width of a container and stretch to the height of this one. Due to their min-width
of 400px
, these flex box warp in 'column' on small screen (demonstration in Example 1).
If one of the box contain too much content, the box is scrollable (like boxOrange
in the demonstration of Example 2).
The issue is when their is scrollable content on small screen. I would like the boxOrange
keep 50% height
of container
when it warp. As you can see in Exemple 2, the content of boxOrange
, isn't scrollable and overflow the container
.
Do you know how to fix that ?
Example 1 - Available on codepen.io
#container {
background-color: red;
padding: 10px;
width: 80%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
#boxOrange {
background-color: orange;
flex: 1;
min-width: 400px;
overflow: scroll;
}
#boxPurple {
background-color: purple;
flex: 1;
min-width: 400px;
}
<div id=container>
<div id="boxOrange">
</div>
<div id="boxPurple">
</div>
</div>
See Question&Answers more detail:os