小编Mat*_*sel的帖子

Safari:flexbox 和 min-height

我需要一个带有 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)

css safari flexbox

3
推荐指数
1
解决办法
1756
查看次数

标签 统计

css ×1

flexbox ×1

safari ×1