我需要一个带有 Flexbox 子项的滚动 Flexbox 容器。容器有一个（由 flexbox ）定义的高度，子级应该和它们的内容一样高。
这在 Safari 中效果很好，在 Safari 中，子级不会超出容器的高度。实际上，Safari 中的行为与孩子们在 Safari 中的行为完全相同min-height: 0，但他们没有。显式设置min-height: auto没有帮助。
div {
background-color: rgba(0,0,0,.1);
box-sizing: border-box;
margin: 4px;
padding: 4px;
}
.fixed {
height: 100%;
left: 0;
max-height: 400px;
position: fixed;
top: 0;
width: 100%;
}
.flex {
display: flex;
flex-direction: column;
/* Safari behaves like min-height: 0; */
}
.full {
flex: 1;
overflow-y: auto;
}
.big {
font-size: 200px;
line-height: 1;
margin: 0;
}
<div class="fixed">
<div class="flex" style="height: 100%">
<div>
A
</div>
<div class="flex full">
<div class="flex">
B_1
</div>
<div class="flex">
<p class="big">B_2</p>
</div>
<div class="flex">
<p class="big">B_3</p>
</div>
</div>
<div>
C
</div>
</div>
</div>
我找不到 Safari 最近记录的任何 Flexbox 错误，但对我来说这看起来像是一个。我在 MacOS (Catalina) 上的 Safari 13 以及 iOS 12 上的 Safari 和 Chrome 中遇到了这个问题。
他们是否仅使用 CSS 方法来解决或解决此问题？
我不知道为什么，但是min-height: fit-content它按预期工作：
div {
background-color: rgba(0, 0, 0, .1);
box-sizing: border-box;
margin: 4px;
padding: 4px;
}
.fixed {
height: 100%;
left: 0;
max-height: 400px;
position: fixed;
top: 0;
width: 100%;
}
.flex {
display: flex;
flex-direction: column;
/* Safari behaves like min-height: 0; */
}
.full {
flex: 1;
overflow-y: auto;
}
.big {
font-size: 200px;
line-height: 1;
margin: 0;
}
.min-fit {
min-height: fit-content;
}
<div class="fixed">
<div class="flex" style="height: 100%">
<div>
A
</div>
<div class="flex full">
<div class="flex min-fit">
B_1
</div>
<div class="flex min-fit">
<p class="big">B_2</p>
</div>
<div class="flex min-fit">
<p class="big">B_3</p>
</div>
</div>
<div>
C
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
