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的justify-content: center页边距。

从.container移除margin-top: auto。
将.block1添加到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; }。

＆＃13;

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

＆＃13;

HasPrincipleKey

＆＃13;

Answer 2

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

＆＃13;

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;

}

＆＃13;

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

＆＃13;

Answer 3

你的代码中有很多不必要的东西（例如html，body和其他东西中的html, body { height:100%; } .container { display:flex; flex-direction:column; justify-content:center; align-items:center; } .block1 { display:flex; justify-content:center; background-color:green; width:300px; min-height:150px; } .block2 { display:flex; background-color:blue; min-height:300px; width: 100%; max-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>

.block2

width: 100%; max-width: 500px;的固定宽度为500px。在宽度低于500px的屏幕上，这将导致出现滚动条。为了使它具有响应性，我将其改为

{{1}}

flexbox div在小屏幕上关闭屏幕

3 个答案: