Question

我有一个垂直的Flex容器，它的内容居中。容器的高度应取决于视口高度，以使弯曲的内容垂直居中显示。但是，容器高度绝不应小于内容的高度，否则内容的顶部将流出视口的顶部。

换句话说：

如果内容的高度小于视口的高度，则应将Flex容器的高度设置为内容的高度。
否则，容器的高度应设置为100vh。

然而，这似乎不起作用：

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

正如您所看到的，只要我们将.content的{{1}}设置为高于height的内容，内容就会开始消失。

请注意，我无法在100vh上设置固定min-height，因为我事先并不知道内容的高度。

如何实现？

Answer 1

您可以设置

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

这样，如果内容的高度小于100vh - 容器的高度将为100vh（来自min-height:100vh;）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果内容的高度超过100vh - 容器的高度将是其内容的高度（来自height:auto;）。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

编辑：由于您的内容也需要max-height，因此您最后可以添加下一个媒体查询：

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

它会强制.content的高度为1800px，高度为＆gt; = 1800px

如何在flex容器上实现`min-height：content`？

1 个答案: