CSS Flexbox防止孩子成长
是否有可能使用 Just flex属性（成长，收缩，基础），可以防止黄色的孩子生长并仅从父母那里获得50％（例如绿色所需的内容）？
父母有flex方向：列，两个孩子都有flex-basis：50％
我知道快速解决方案是在黄色儿童上设置高度： 50％和溢出：自动触发滚动条，但我想在不使用高度属性的情况下实现这一目标。
body{
margin: 0;
}
.parent{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.parent div:first-child{
background-color: yellow;
flex-basis: 50%;
width: 200px;
}
.parent div:last-child{
background-color: blue;
flex-basis: 50%;
width: 200px;
}<div class="parent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
</div>
<div>
</div>
</div>Is it possible to prevent the yellow child growing and to take just 50% from parent (like the green takes, because has no content), using just flex properties (grow, shrink, basis)?
Parent has flex-direction: column and both of the children have flex-basis: 50%
I know that a fast solution is to set on yellow child height: 50% and overflow: auto to trigger the scrollbar, but I wanted to achieve that without using the height property.
body{
margin: 0;
}
.parent{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.parent div:first-child{
background-color: yellow;
flex-basis: 50%;
width: 200px;
}
.parent div:last-child{
background-color: blue;
flex-basis: 50%;
width: 200px;
}<div class="parent">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
</div>
<div>
</div>
</div>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不，
没有弹性属性可以使您解决此问题。 Flexbox布局模式考虑了孩子的内容，就像大多数CSS一样，它将尽力使内容可见。
如果您希望黄色框仅占用50％的高度，则必须决定没有空间的内容会发生什么。以下是设置
Overflow-y：scroll允许该框显示剩余内容的一个示例，而仍然只有50％的高度。No.
There are no flex properties that would allow you to solve this issue. The flexbox layout mode takes into account the content of its children and like most CSS does, it will try its best to make content visible.
If you want your yellow box to only take up 50% height you have to decide what will happen to the content that will have no room. Below is one example where setting
overflow-y: scrollallows the box to reveal the remaining content while still being only 50% height.