flexbox div 在小屏幕上离开屏幕

Question

先上代码：

 html {
  display:flex;
  width:100%;
  height:100%;
}

body {
 display:flex;
  flex:1;
}

.container {
  display:flex;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.block1 {
  justify-content:center;
  background-color:green;
  display:flex;
  width:300px;
  min-height:150px;
}

.block2 {
  background-color:blue;
  display:flex;
  min-height:300px;
    width:500px;

}

 <div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

我在一个容器中有两个块。我希望它们在屏幕上居中。问题是当屏幕高度很小时，我有一个滚动条出现但第一个块有一个部分离开屏幕（不可见）

要重现，请降低 jsfiddle 预览窗口的高度。你会明白我所说的离开屏幕的意思。

预期的行为是让滚动条出现并保持 div 可见。

我尝试在每个元素上将 flex-shrink 设置为 0，但它不起作用……

原文由 Adavo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Flexbox 的 auto 边距。

1. 从 justify-content: center 中删除 --- .container 。
2. 添加 margin-top: auto 到 .block1 。
3. 添加 margin-bottom: auto 到 .block2 。

 html {
  display:flex;
  width:100%;
  height:100%;
}

body {
 display:flex;
  flex:1;
}

.container {
  display:flex;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
  align-items:center;
}

.block1 {
  justify-content:center;
  background-color:green;
  display:flex;
  width:300px;
  min-height:150px;
  margin-top: auto;
}

.block2 {
  background-color:blue;
  display:flex;
  min-height:300px;
  width:500px;
  margin-bottom: auto;
}

 <div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

原文由 darrylyeo 发布，翻译遵循 CC BY-SA 3.0 许可协议