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可见。

我试图通过设置柔性缩小到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>

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>

Answer 3

在你的代码中有很多不必要的东西（例如在HTML，body和其他东西中的display:flex。我删除了所有的东西，现在它似乎工作：

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具有500像素的固定宽度。在500px宽度以下的屏幕上，这将导致滚动条出现。它是有求必应，我改变了对

width: 100%; 
max-width: 500px;