小屏幕上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

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>

- darrylyeo

---

如此简单，以至于我没有考虑它，所以我在没有使用 justify-content 的情况下以不同的方式管理我的 html。令人沮丧的是，我仍然不明白为什么我的完整 flexbox 设计不起作用，但至少我可以继续前进。谢谢;-) - Adavo

很高兴能为您效劳！Flexbox 是一个相当陡峭的学习曲线，但你最终会掌握它的！ - darrylyeo

Answer 2

您可以在容器中添加position: absolute; top: 0：

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;
  position: absolute;
  top: 0;
}

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

- Dekel

---

如果我设置width:100％，在这个示例上可以正常工作，但不幸的是在我的项目中（比这个示例更复杂），它不起作用。也许我会尝试改变示例以重现错误，即使使用position:absolute和top:0。 - Adavo