How to force flex children not to overflow the container? - css

Question

Given a flexbox container, how could I make sure that, if children have lots of content, they don't overflow the container?
.container {
display: flex;
flex-direction: column;
background-color: #ccc;
height: 210px;
width: 200px;
}
.child {
display: flex;
width: 100px;
}
.first {
background-color: rgba(255, 0, 0, 0.2);
}
.second {
background-color: rgba(0, 255, 0, 0.2);
}
.third {
background-color: rgba(0, 0, 255, 0.2);
}
<div class="container">
<div class="first child">first first first first first first first</div>
<div class="second child">second second second second second second second second second second second second second second second second second second second</div>
<div class="third child">third</div>
</div>

Answer 1

The children overflow their parent element because their intrinsic height (the height of their contents) is larger than the parent's height. You can advise the browser to ignore the intrinsic height by setting min-height: 0 on the child elements. If you add overflow: hidden the result should be what you seem to expect:
.container {
display: flex;
flex-direction: column;
background-color: #ccc;
height: 210px;
width: 200px;
}
.child {
width: 100px;
min-height: 0;
overflow: hidden;
}
.first {
background-color: rgba(255, 0, 0, 0.2);
}
.second {
background-color: rgba(0, 255, 0, 0.2);
}
.third {
background-color: rgba(0, 0, 255, 0.2);
}
<div class="container">
<div class="first child">first first first first first first first</div>
<div class="second child">second second second second second second second second second second second second second second second second second second second</div>
<div class="third child">third</div>
</div>
The children get height distributed among them proportionally to their content height. Overflowing content is hidden.

Answer 2

You could use overflow: auto on child element. In case you want to hide overflow only on largest item then you could use flex: 1 on that item.
.container {
display: flex;
flex-direction: column;
background-color: #ccc;
height: 210px;
width: 200px;
}
.child {
display: flex;
width: 100px;
overflow: auto;
}
.first {
background-color: rgba(255, 0, 0, 0.2);
}
.second {
background-color: rgba(0, 255, 0, 0.2);
flex: 1;
}
.third {
background-color: rgba(0, 0, 255, 0.2);
}
<div class="container">
<div class="first child">first first first first first first first</div>
<div class="second child">second second second second second second second second second second second second second second second second second second second</div>
<div class="third child">third</div>
</div>

Answer 3

flex has
Three values: flex-grow | flex-shrink | flex-basis;
you should apply particular max-height for first child.
.first {
background-color: rgba(255, 0, 0, 0.2);
flex: 0 1 1;
max-height:70px;
}
otherwise if first div height increases it will dominate on other divs.
.container {
display: flex;
flex-direction: column;
background-color: #ccc;
height: 210px;
width: 200px;
}
.child {
width: 100px;
overflow:hidden;
}
.first {
background-color: rgba(255, 0, 0, 0.2);
flex: 0 1 auto;
}
.second {
background-color: rgba(0, 255, 0, 0.2);
flex: 0 1 1;
}
.third {
background-color: rgba(0, 0, 255, 0.2);
flex: 0 1 1;
}
<div class="container">
<div class="first child">first first first first first first first</div>
<div class="second child">second second second second second second second second second second second second second second second second second second second</div>
<div class="third child">third</div>
</div>

Answer 4

Using min-height: 210px; instead of explicitly setting a height on your container gives you the desired affect by letting an extra long child to extend its height.
Also, great question writing! Nice to see diagrams of whats happening vs expected, ect.