html - 防止元素缩小

Question

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

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

Answer 1

请注意，flex 容器上的 height: 100% 会被忽略，因为它的包含 block (body) 具有 height: auto。

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

要修复它，您可以向 body 添加固定高度:

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

但是，如果内容比视口(viewport)高，结果将是不理想的，因为因为你有 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>