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但它不起作用...

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>