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;