小编pry*_*n.v的帖子

Safari 中弹性项目的高度错误

在 Safari 中，div.header具有此布局的元素 ( ) 不会计算其高度。在 Chrome 中它可以工作。

如果你在 Safari 中打开这个例子，你会看到高度div.header是 48px（padding-top + padding-bottom）。

如果在 Chrome 中打开它，高度将是正常的（内容 + 填充）。如何解决这个问题？

* {
  box-sizing: border-box;
}

.root {
  min-width: 1280px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  background: yellow;
  padding: 24px 16px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: flex-start;
}

.content {
  width: 100%;
  padding: 16px;
  background: red;
}

Run Code Online (Sandbox Code Playgroud)