flex item ignoring align-content property

Question

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?

Answer 1

In a single-line flex container (flex-wrap: nowrap), use align-items for cross-axis alignment.

In a multi-line flex container (flex-wrap: wrap), use align-content.

In this case, because there is only one flex line (which occupies the full-height of the container), use align-items: center on the container, or align-self: center on the item.

align-items goes on the flex container. It sets the default align-self for all items.

align-self goes on individual flex items. It overrides align-items set by the parent for that particular item.

Here's a more complete explanation:

• How does flex-wrap work with align-self, align-items and align-content?

Answer 2

Try adding:

.content-container {
    align-self: center;
    flex: 1;
}

Answer 3

Use align-items to distribute items along the cross-axis of their container:

main {
      align-items: center;
}