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的{{1}}（初始高度）设置为flex-basis，并且它是唯一具有属性0的元素，高度不应该固定在flex-grow容器的其余部分吗？为什么会发生这种情况？

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

非常感谢。

Answer 1

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

您需要考虑另外一个Flexbox功能：

Flex容器的初始设置为min-height: auto。这意味着，默认情况下，弹性项目不能短于其内容。覆盖此设置后，您的布局将按预期工作。

您可以使用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>

为什么我要指定高度：0，即使我在CSS3 flexbox中指定了flex-basis：0？

1 个答案: