html - 为什么我要指定高度 : 0 even if I specified flex-basis: 0 in CSS3 flexbox?

Question

我正在尝试制作一个带有标题的固定大小的内容阅读器。即使内容滚动，也应显示标题。在这种情况下，我尝试使用 CSS3 flexbox 制作这样的结构:

.flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
}

.title {
    height: 50px;
    line-height: 50px;
    background: #eee;
}

.text-wrap {
    flex: 1 0 0;
}

.text {
    height: 100%;
    overflow-y: auto;
}

<div class="flex">
    <div class="title">Title</div>
    <div class="text-wrap">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus justo vitae urna lacinia pharetra. Quisque nulla lorem, laoreet quis dapibus nec, vehicula vitae lorem. Nunc fringilla justo vel metus rhoncus, at congue leo dictum. Morbi congue tortor lacinia, mollis sapien indsadsadf, rutrum purus. Nam ornare dapibus mi, vitae varius diam tincidunt id. Donec maximus sem nec luctus euismod. Morbi a volutpat diam. In sapien orci, auctor et facilisis eu, finibus ac mauris. Vivamus eu nunc porta, congue libero quis, rutrum nibh. Proin feugiat vel augue mattis cursus.</p>
        </div>
    </div>
</div>

这样无论 flex 容器的大小是多少，内容都会得到剩余的高度。但是，如您所见，内容从容器中溢出，overflow-y 属性不起作用。

但是，如果我在 text-wrap 中将高度指定为 0，我可以看到我的代码正在运行，如下所示:

.flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
}

.title {
    height: 50px;
    line-height: 50px;
    background: #eee;
}

.text-wrap {
    flex: 1 0 0;
    height: 0;
}

.text {
    height: 100%;
    overflow-y: auto;
}

<div class="flex">
    <div class="title">Title</div>
    <div class="text-wrap">
        <div class="text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus justo vitae urna lacinia pharetra. Quisque nulla lorem, laoreet quis dapibus nec, vehicula vitae lorem. Nunc fringilla justo vel metus rhoncus, at congue leo dictum. Morbi congue tortor lacinia, mollis sapien indsadsadf, rutrum purus. Nam ornare dapibus mi, vitae varius diam tincidunt id. Donec maximus sem nec luctus euismod. Morbi a volutpat diam. In sapien orci, auctor et facilisis eu, finibus ac mauris. Vivamus eu nunc porta, congue libero quis, rutrum nibh. Proin feugiat vel augue mattis cursus.</p>
        </div>
    </div>
</div>

我无法理解这种行为。我知道 flex-basis 是一个决定元素初始高度的属性(因为 flex-direction 设置为 column)，并且 flexbox 根据 flex-grow 属性将剩余的高度划分给元素。

然后在这种情况下，由于 text-wrap 的 flex-basis(初始高度)设置为 0 并且它是唯一具有属性 flex-grow 的元素，高度不应该固定到 flex 容器的其余部分吗？为什么会发生这种行为？

此外，为什么我要为 text-wrap 指定 height: 0 属性才能使我的代码正常工作？

非常感谢。

Answer 1

您的代码正确且工作正常。

您还需要考虑一项 flexbox 功能:

flex 容器的初始设置是 min-height: auto。这意味着，默认情况下， flex 元素不能比其内容短。覆盖此设置后，您的布局将按预期工作。

您可以使用 height: 0，但这是标准方法:

.text-wrap {
    flex: 1 0 0;
    min-height: 0; /* new */   
}

完整解释在这里:Why doesn't flex item shrink past content size?

.flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 150px;
  border: 1px solid #ddd;
}
.title {
  height: 50px;
  line-height: 50px;
  background: #eee;
}
.text-wrap {
  flex: 1 0 0;
  min-height: 0; /* new */
}
.text {
  height: 100%;
  overflow-y: auto;
}

<div class="flex">
  <div class="title">Title</div>
  <div class="text-wrap">
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus justo vitae urna lacinia pharetra. Quisque nulla lorem, laoreet quis dapibus nec, vehicula vitae lorem. Nunc fringilla justo vel metus rhoncus, at congue leo dictum. Morbi
        congue tortor lacinia, mollis sapien indsadsadf, rutrum purus. Nam ornare dapibus mi, vitae varius diam tincidunt id. Donec maximus sem nec luctus euismod. Morbi a volutpat diam. In sapien orci, auctor et facilisis eu, finibus ac mauris. Vivamus
        eu nunc porta, congue libero quis, rutrum nibh. Proin feugiat vel augue mattis cursus.</p>
    </div>
  </div>
</div>