html - 防止物品收缩

我想制作一个具有可变高度的简单弹出窗口，如果它小于视口，它将垂直居中，而当它大于视口时，将不会缩小。这是示例代码：

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-child {
  flex-shrink: 0;
}
.item {
  height: 160px;
  background-color: #C3C3FC;
  border: 1px solid red;
}

<div class="flex-container">
  <div class="flex-child">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

最佳答案

请注意，flex容器上的height: 100%被忽略，因为其包含块（body）具有height: auto。

因此，flex容器的高度将是其内容的高度，因此justify-content: center不会引起注意。

要解决此问题，可以在body上添加固定高度：

html, body {
  height: 100%;
  margin: 0;
}

但是，如果内容比视口高，那么结果将是不希望的，因为既然您具有justify-content: center，内容将同时从上方和下方溢出，但是滚动条将不允许看到上述溢出。

因此，不应为flex容器使用固定的高度，而只需要一个最小的高度，这样就可以根据需要增大它的高度：

.flex-container {
  min-height: 100%;
  height: auto; /* Initial value */
}

html, body {
  height: 100%;
  margin: 0;
}
.flex-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-child {
  flex-shrink: 0;
}
.item {
  height: 160px;
  background-color: #C3C3FC;
  border: 1px solid red;
}

<div class="flex-container">
  <div class="flex-child">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>