Flexbox sets height of inside element to 0
Sorry for replying to an old post. I was frantically trying to solve a similar issue where I had some nested flex content that had a height of 0 even though it clearly had children, and the children had height!
I solved it (after an hour of cussing flex box to death) by setting flex: 0 0 auto on the element with 0 height. Setting the flex-basis alone wasn't enough. I hope this will work for anyone else coming across this post.
Before that, I tried all sorts. A min-height also worked, but I really wanted to avoid hard-coding the height, as it should be dynamic.
And then the Flexbox module changed the initial value of min-height:
4.5 Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.
That auto value behaves like this:
On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, the following table gives the minimum size:
┌────────────────┬──────────────────┬─────────────────────────────────────┐ │ Specified Size | Transferred Size | Minimum Size | ├────────────────┼──────────────────┼─────────────────────────────────────┤ | | | content size | | ✓ | | min(specified size, content size) | | | ✓ | min(transferred size, content size) | | ✓ | ✓ | min(specified size, content size) | └────────────────┴──────────────────┴─────────────────────────────────────┘Otherwise, this keyword computes to 0 (unless otherwise defined by a future specification).
So min-height: auto forces the p element to be tall enough to show the content when oveflow: visible. But when you change it to overflow: hidden, the min-height becomes 0. And since there is no space, the p element shrinks.
So either use overflow: visible, or impose some min-height manually.
Alternatively, you can prevent shrinking with flex-shrink: 0. Note that since you have height: 20%, part of the content may still be clipped.
.N {
overflow: scroll;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
min-width: 100vmin;
width: 100vmin;
height: 65vmin;
border: 1px solid green;
list-style: none;
}
.N img {
display: list-item;
width: 98%;
height: 98%;
order: 1;
}
.N p:nth-child(1) {
display: list-item;
font-size: 4vmin;
order: 2;
background-color: white;
}
.N p:nth-child(2) {
overflow: hidden;
height: 20%;
display: list-item;
text-align: justify;
font-size: 4vmax;
background-color: white;
order: 3;
flex-shrink: 0;
}<div class="N">
<p>Lorem ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="http://codegentstatic-codegentltd.netdna-ssl.com/media/original/0d9648a6-afc6-1/845x2000.jpg">
</div>Instead, you might want something like this:
min-height: 20%;
height: auto;
flex-shrink: 0;
.N {
overflow: scroll;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
min-width: 100vmin;
width: 100vmin;
height: 65vmin;
border: 1px solid green;
list-style: none;
}
.N img {
display: list-item;
width: 98%;
height: 98%;
order: 1;
}
.N p:nth-child(1) {
display: list-item;
font-size: 4vmin;
order: 2;
background-color: white;
}
.N p:nth-child(2) {
overflow: hidden;
display: list-item;
text-align: justify;
font-size: 4vmax;
background-color: white;
order: 3;
min-height: 20%;
flex-shrink: 0;
}<div class="N">
<p>Lorem ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="http://codegentstatic-codegentltd.netdna-ssl.com/media/original/0d9648a6-afc6-1/845x2000.jpg">
</div>