CODEWITHSUNDEEP
htmlcssflexbox
Timo Müller
Timo Müller

Reputation: 81

CSS Flex-Boxes: Do not Collapse Centered Content

I want to center a div with flex boxes, but don't want it to collapse.

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

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

here the HTML ...

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

The problem: forum__layout__container collapses. I want it to fill the screen.

Thanks.

EDIT:

Thanks for your attempts, but my problem is my max-width ... It makes my container collapse, which I don't desire !

Upvotes: 0

Views: 875

Answers (1)

Gerard
Gerard

Reputation: 15786

To use the whole screen for a column, you need to specify the height. When then using justify-content, the flexbox will automatically spread the content.

#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>

Upvotes: 1

Related Questions