gpt4 book ai didi

css - Flexbox 列子项的高度 100%

转载 作者:数据小太阳 更新时间:2023-10-29 09:07:50 25 4
gpt4 key购买 nike

<分区>

我在使用 flexbox 列时遇到问题,因为 flex 元素的子项不会以百分比响应 height。我只在 Chrome 中检查过这个,据我所知,这是一个仅限 Chrome 的问题。这是我的例子:

HTML

<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>

CSS

.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;

display: flex;
flex-direction:column;
}

.flex{
background:blue;
flex:1;
}

.flex-child{
background:red;
height:100%;
width:100%;
display:block;
}

.static{
background:green;
width:100%;
height:5rem;
}

Here's the CodePen.

我想要它,所以红色 .flex-child 填充蓝色 .flex。为什么 height:100% 不起作用?

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com