我需要一个带有 flexbox 子项的滚动 flexbox 容器。容器有一个(通过 flexbox)定义的高度,子元素应该和它们的内容一样高。
这很有效,除了在 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;
}Run Code Online (Sandbox Code Playgroud)
<div class="fixed">
<div class="flex" style="height: 100%">
<div>
A …Run Code Online (Sandbox Code Playgroud)