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

Question

我有一个flexbox的问题.当我设置段落的高度,并设置其overflow来hidden,该款消失Flexbox的div.

这是小提琴: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隐含的最小Flex项目大小

为了为flex项提供更合理的默认最小大小,此规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值.

该auto值的行为如下:

在溢出在主轴上可见的flex项目上,当在flex项目的主轴min-size属性上指定时,下表给出了最小大小:

???????????????????????????????????????????????????????????????????????????
? Specified Size | Transferred Size |            Minimum Size             |
???????????????????????????????????????????????????????????????????????????
|                |                  | content size                        |
|       ?       |                  | min(specified size, content size)   |
|                |        ?        | min(transferred size, content size) |
|       ?       |        ?        | min(specified size, content size)   |
???????????????????????????????????????????????????????????????????????????

否则,此关键字计算为0(除非未来规范另有定义).

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

Answer 2

很抱歉回复旧帖子。我正在疯狂地尝试解决一个类似的问题，即我有一些嵌套的flex内容，尽管高度明显为子代，而子代的高度却为0，但高度为0！

我将其设置flex: 0 0 auto为0高度，从而解决了这一问题（经过一小时的flex盒死亡）。仅设置flex-basis是不够的。我希望这对其他遇到此帖子的人都有用。

在此之前，我尝试了各种方法。A min-height也可以，但是我真的想避免对高度进行硬编码，因为它应该是动态的。