フレキシボックスの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>

私は、コンテナ内の2つのブロックを持っています。私はそれらをスクリーンの中央に置いて欲しい。 問題は、画面の高さが小さく、表示されるスクロールバーがあるが、最初のブロックにオフスクリーンになる部分がある（非表示になる）。

jsfiddleプレビューウィンドウの高さを小さくする。あなたは私がスクリーンから出ることによって意味するものを理解するでしょう。

予想される動作は、スクロールバーを表示させ、divを表示したままにすることです。

私はすべての要素に0にフレックスシュリンクを設定することで、試してみましたが、あなたがコンテナにposition: absolute; top: 0を追加することができます...

Answer 1

にあなたはフレキシボックスの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

が動作していない：

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

あなたのコードには多くの不必要なものがあります（例えば、display:flex、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 500pxなどの固定幅を持っていました。 500px幅以下の画面では、スクロールバーが表示されます。それが応答するために、私は

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