How to achieve `min-height: content` on a flex container?

Question

I have a vertical flex container that centers its content. The height of the container should depend on the viewport height, such that the flexed content appears vertically centered. However, the container height should never be smaller than the content's, otherwise the top of the content would flow out of the viewport's top.

In other words:

• If the content's height is smaller than the viewport's, then the flex container's height should be set to the content's height.
• Otherwise, the container's height should be set to 100vh.

However, this does not seem to work:

    .flex-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
    }
        .flex-item {
            flex: 0 0 auto;
        }
             .content {
                 background-color: red;
                 font-size: 50px;
                 color: white;
                 height: 115vh;
             }

<div class="flex-container">
    <div class="flex-item">
        <div class="content">
            Content
        </div>
    </div>
</div>

As you can see, the content starts to disappear as soon as we set .content's height to something higher than 100vh.

Note that I can't set a fixed min-height on .flex-container since I don't know the content's height beforehand.

How to achieve that?

Answer 1

You can set

.flex-container {
    height: auto;
    min-height: 100vh;
}

That way if height of content is less than 100vh - container's height will be 100vh (from min-height:100vh;).

html,body {
  margin: 0;
}
.flex-container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  justify-content: center;
}

.flex-item {
  flex: 0 0 auto;
}

.content {
  background-color: red;
  font-size: 50px;
  color: white;
  height: 25vh;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="content">
      Content
    </div>
  </div>
</div>

If height of content is more than 100vh - container's height will be height of it's content (from height:auto;).

html,body {
  margin: 0;
}
.flex-container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  justify-content: center;
}

.flex-item {
  flex: 0 0 auto;
}

.content {
  background-color: red;
  font-size: 50px;
  color: white;
  height: 115vh;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="content">
      Content
    </div>
  </div>
</div>

---

EDIT: Since you also need max-height for your content, you can add next media query in the end:

@media (min-height: 1800px) {
  .content {
    height: 1800px;
  }
}

It will force height of .content to be 1800px on displays with height >= 1800px