CSSフレックスボックス：中央のコンテンツを折りたたんではいけません

Question

フレックスボックスでdivの中心を合わせたいが、折りたたみはしたくない。ここではHTML

#forum { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

.forum__layout__container { 
    display: flex; 
    flex-direction: column; 
    max-width: 960px; 
    margin-top: 30px; 
} 

...

<div id="forum"> 
    <div class="forum__layout__container"> 
    ... 
    </div> 
</div> 

問題：forum__layout__container崩壊。私はそれが画面いっぱいにしたい。

ありがとうございました。

EDIT：あなたの試みのため

おかげで、私の問題は、それは私が望んでいない私のコンテナの崩壊を、作る...私max-widthです！

Answer 1

画面全体を列として使用するには、高さを指定する必要があります。 justify-contentを使用すると、flexboxは自動的にコンテンツを広げます。

#forum { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.forum__layout__container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    max-width: 960px; 
 
    margin-top: 30px; 
 
    height: 100vh; 
 
    justify-content: space-around; 
 
} 
 

 
p { 
 
    margin: 0; 
 
}

<div id="forum"> 
 
    <div class="forum__layout__container"> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    <p>Text</p> 
 
    </div> 
 
</div>