css - Flexbox 将内部元素的高度设置为 0

Question

我对 flexbox 有疑问。当我设置段落的高度并将其 ​​overflow 设置为 hidden 时，该段落会在 flexbox div 中消失。

这是 fiddle : https://jsfiddle.net/Slit/0yy3q8bL/

代码:

        <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>

<style>
.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;
}
</style>

Answer 1

然后 Flexbox 模块改变了 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.

auto 值的行为如下:

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).

因此 min-height: auto 强制 p 元素足够高以在 oveflow: visible 时显示内容。但是，当您将其更改为 overflow: hidden 时，min-height 变为 0。由于没有空格，p 元素会收缩。

所以要么使用overflow: visible，要么手动施加一些min-height。

或者，您可以使用 flex-shrink: 0 来防止收缩。请注意，由于您有 height: 20%，因此部分内容可能仍会被剪裁。

.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>

相反，您可能想要这样的东西:

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>