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>
