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

概述我正在尝试制作一个带标题的固定大小的内容阅读器.即使内容滚动,也应显示标题.在这种情况下,我尝试使用 CSS3 flexbox制作这样的结构： .flex { display: flex; flex-direction: column; width: 100%; height: 150px; border: 1px solid #ddd;}.title 我正在尝试制作一个带标题的固定大小的内容阅读器.即使内容滚动,也应显示标题.在这种情况下,我尝试使用 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 >    <div >Title</div>    <div >        <div >            <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属性不起作用.

但是,如果我在文本换行中将高度指定为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 >    <div >Title</div>    <div >        <div >            <p>Lorem ipsum dolor sit amet,rutrum nibh. Proin feugiat vel augue mattis cursus.</p>        </div>    </div></div>

我无法理解这种行为.我理解flex-basis是一个决定元素初始高度的属性(因为flex-direction设置为column),flexBox根据flex-grow属性将剩余的高度除以元素.

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

另外,为什么我应该为text-wrap指定height：0属性以使我的代码工作？

非常感谢.

解决方法 您的代码正确且工作正常.

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

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

您可以使用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 >  <div >Title</div>  <div >    <div >      <p>Lorem ipsum dolor sit amet,at congue leo dictum. Morbi        congue tortor lacinia,finibus ac mauris. Vivamus        eu nunc porta,rutrum nibh. Proin feugiat vel augue mattis cursus.</p>    </div>  </div></div>

@H_404_59@ 总结

以上是内存溢出为你收集整理的html – 为什么我要指定高度：0即使我在CSS3 flexbox中指定了flex-basis：0？全部内容，希望文章能够帮你解决html – 为什么我要指定高度：0即使我在CSS3 flexbox中指定了flex-basis：0？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。