gpt4 book ai didi

html - chrome 中忽略了 flex 元素内的最小高度

转载 作者:太空狗 更新时间:2023-10-29 15:20:06 25 4
gpt4 key购买 nike

<分区>

我有一个带有 flex-direction: row 的 flex 容器和一些灵活的元素。 flex 元素本身会有不同的高度,但由于默认 align-items: stretch ,它们都填满了 flex 容器的高度。在我的特定用例中,这是完美的。

问题是我有这些 <div> s 在每个 flex 容器中,我需要它们占据它们父容器的整个高度。我以为我可以设置 min-height: 100%在他们。此解决方案适用于 Firefox 和 Internet Explorer,但出于某种原因不适用于 Google Chrome。

这是演示问题的代码片段。如果你在 chrome 上查看这个,你会看到较短的白色 .card没有填满紫色.card_container .但是,如果您在 IE 或 FF 上查看它,它将填满父容器的高度。

#grid {
background: rgba(255,0,0,0.2);
padding: 10px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.card_container {
width: 300px;
background: rgba(0,0,255,0.2);
margin: 15px;
padding: 5px;
}


.card {
background: white;
min-height: 100%; /* <- Why isn't this working? */
}
<div id="grid">
<div class="card_container">
<div class="card">
This text is very short.
</div>
</div>
<div class="card_container">
<div class="card">
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
</div>
</div>
</div>

我发现的一种解决方法是制作 .card_container一个 flex 容器,并显式设置 .cardwidth: 100% .

例如,下面的代码片段似乎适用于 Chrome、FF 和 IE:

#grid {
background: rgba(255,0,0,0.2);
padding: 10px;

display: -ms-flexbox;
display: -webkit-flex;
display: flex;

}

.card_container {
width: 300px;
background: rgba(0,0,255,0.2);
margin: 15px;
padding: 5px;

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}


.card {
width: 100%;
background: white;
}
<div id="grid">
<div class="card_container">
<div class="card">
This text is very short.
</div>
</div>
<div class="card_container">
<div class="card">
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
This text is very long.
</div>
</div>
</div>

我想知道为什么需要这种解决方法。我做错了什么还是这是一个错误?有谁知道它是否记录在任何地方?

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