html - 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>

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

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

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

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

Answer 1

您可以使用 Flexbox 的 auto 边距。

1. 从 .container 中删除 justify-content: center。
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>