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。由于没有 space，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>

Answer 2

很抱歉回复旧的post。我疯狂地试图解决一个类似的问题，我有一些高度为 0 的嵌套 flex 内容，即使它显然有 children，并且 children 有高度！

我通过在高度为 0 的元素上设置 flex: 0 0 auto 解决了这个问题（在咒骂 flex box 一个小时之后）。仅设置 flex-basis 是不够的。我希望这对其他遇到此问题的人有用 post.

在此之前，我尝试了各种方法。 min-height 也有效，但我真的想避免 hard-coding 高度，因为它应该是动态的。

Answer 3

虽然我无法解释为什么这有效（但），但我有两个解决方案可以在其他答案无效的情况下使用。我遇到过这样一种情况，当给定 height: 100%.

时，嵌套在多级弹性列和行中的元素拒绝拉伸到其直接父级的全高

我发现的两个解决方案适用于这种情况：

给问题元素祖先中的所有元素设置 100% 的高度。
（可能是更好的解决方案）：从问题元素中删除 height: 100% 并将其替换为 align-self stretch 或将 align-items: stretch 添加到直接父元素。

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

Flexbox sets height of inside element to 0

css

flexbox