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 Implied Minimum Size of Flex Items

为flex items提供更合理的默认最小尺寸，   本规范引入了一个新的auto值作为初始值   中定义的min-width和min-height属性的值   CSS 2.1。

auto值的行为如下：

在主轴上可见溢出的弹性项目上，何时在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。

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

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

Answer 3

虽然我无法提供关于为何有效的解释（但至今），但我有两种解决方案可以在其他答案不起作用的情况下起作用。我遇到这样一种情况，当给定void swapNodes(Node * p1, Node * p2, Node ** start) { Node *p1pre = NULL; Node *p1curr = *start; while (p1curr && p1curr!=p1) { p1pre = p1curr; p1curr = p1curr->next; } Node *p2pre = NULL; Node *p2curr = *start; while (p2curr && p2curr != p2) { p2pre = p2curr; p2curr = p2curr->next; } if (p1pre != NULL) { p1pre->next = p2curr; } else { *start = p2curr; } if (p2pre != NULL) { p2pre->next = p1curr; } else { *start = p1curr; } Node *temp = p2curr->next; p2curr->next = p1curr->next; p1curr->next = temp; return; } ``时，嵌套在多层flex列和行中的元素拒绝拉伸到其直接父级的全部高度。

在这种情况下，我发现了两种解决方案：

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

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

3 个答案: