Safari:弹性盒和最小高度
Posted
技术标签:
【中文标题】Safari:弹性盒和最小高度【英文标题】:Safari: flexbox and min-height 【发布时间】:2020-05-13 16:47:57 【问题描述】:我需要一个带有 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;
<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 方法来解决或解决这个问题吗?
【问题讨论】:
【参考方案1】:我不知道为什么,但 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>
【讨论】:
谢谢^^ 显然Safari的开发工具比我还差,因为它不会自动完成这个选项... 非常感谢您的回答,这是一个令人沮丧的问题。不知道为什么默认情况下没有设置...完全没有它!【参考方案2】:这里是修复的根本问题:https://github.com/philipwalton/flexbugs#flexbug-1
【讨论】:
以上是关于Safari:弹性盒和最小高度的主要内容,如果未能解决你的问题,请参考以下文章
Flex 网格在 Safari 上未正确呈现 - 弹性项目上没有高度