how to disable flexbox child always filling the container

Vote count: 0

I have the following:

main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  }

.content-container {
  padding: .5em;
  margin-bottom: 74px;
  flex-basis: min-content;
  }

<main>
<div class="content-container">
     <div>Exercitationem officiis, quod. Culpa deserunt et nisi perspiciatis quisquam tempora tempore voluptates?
      Assumenda commodi distinctio fugiat illo in ipsam maiores minus nam ratione rem, saepe soluta tempora, vero.
      Quisquam, voluptatum!
    </div>
    <div>Autem cumque debitis deleniti dicta doloremque ea est ex, harum magni natus omnis placeat provident recusandae
      saepe sapiente, ut voluptas voluptate, voluptatibus? Dolore dolores iure necessitatibus non obcaecati saepe sequi!
    </div>  
</div>
</main

I would like to have the .content-container always centered regardless of the screen size. But the issue is that the .content-container div always gains a height of 100vh (regardless of not having a defined height). I tried setting flex-basis but it has no effect.

If I manually set the height to for example 100px, the content will just overlap.

What am I doing wrong?

asked 33 secs ago

Miha Šušteršič

Let's block ads! (Why?)

how to disable flexbox child always filling the container