フレックスボックスでコンテンツを垂直方向にラップする方法は？

Question

フレックスボックスコンテナの内側に3つのdivがあります。

私は次のように表示される3 divsたい：

+-----------------------------------------------+ 
|  +-----------------+-----------------+  | 
|  |     |     |  | 
|  |     |     |  | 
|  +-----------------+-----------------+  | 
|            | 
|  +-----------------------------------+  | 
|  |         |  | 
|  |         |  | 
|  +-----------------------------------+  | 
|            | 
+-----------------------------------------------+ 

ので、コンテナは、そのコンテンツにだけ、そのコンテンツに対して垂直方向にそれ以上ではないに適応する必要がありますが。

divsの間に大きな空白が表示されていますが、コンテナは親のheightの100％を取得しています。

heightプロパティをコンテナに入れずに、height: auto;を設定してみましたが、どちらも機能しませんでした。

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
html,body{ 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#container{ 
 
\t display: flex; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t margin: auto; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t flex-wrap: wrap; 
 
\t max-width: 450px; 
 
\t border: 1px solid; 
 
} 
 

 
#div1{ 
 
\t width: 50%; 
 
\t height: 155px; 
 
\t background-color: blue; 
 
} 
 

 
#div2{ 
 
    width: 50%; 
 
    height: 155px; 
 
    background-color: red; 
 
} 
 

 
#div3{ 
 
    width: 70%; 
 
    height: 155px; 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div id="div1"></div> 
 
    <div id="div2"></div> 
 
    <div id="div3"></div> 
 
</div>

注：それは大きなdivの間の空白を参照するようにしてください。ここ

私が持っているコードです。

コンテナに内容をシュリンクラップさせ、親の100％の高さにすることはできません。

ありがとうございます！

Answer 1

フレックスコンテナを作成する場合、初期設定はalign-content: stretchです。

これにより、複数行のフレックスアイテムがコンテナの全長に渡って配布されます。

この設定をalign-content: flex-start（#container）で上書きします。

---

は、あなたがこのルールで削除する必要があり、垂直#containerシュリ​​ンクラップその内容を作成するには：#containerため

#container { bottom: 0; } 

絶対配置され、かつ配置されている親要素、希望はありません#containerの包含ブロックを確立すると、デフォルトの包含ブロックは、ブロックまたはビューポートを含むになります。

これは、適用した黒い境界線で示すように、コンテナが上から下に伸びている理由です。 bottom: 0を取り除くと、容器はheight: autoのようになります。

は、ここではCSSのポジショニングの詳細情報：https://developer.mozilla.org/en-US/docs/Web/CSS/position