Css 弹性溢出问题

Question

我有：

.container {
    display:flex;
    align-items:center
}
.content {
    flex-grow:1
}

以便仅将 .content div 与 css 垂直对齐。内容动态变化，这就是我不能使用 position:absolute; margin-top:50%... 样式的原因。因为我永远不知道每次内容更新时 div 的确切高度。

但是在 .container 宽度发生变化但高度保持不变的情况下，.content 会溢出 .container 顶部，因为它将文本包裹在其中。

我想做的是永远不要让 .content 超出顶部位置小于 0。即使是最理想的情况也会保留 .container 的 padding-top 值，并且margin-top .content 的值。溢出的底部就可以了，事实上这是我的偏好。

有什么解决方法吗？

Answer 1

您可以使 .container height 灵活：使用 min-height 而不是 height。

.container {
  display: flex;
  align-items:center;
  min-height: 75px;
  border: 3px solid blue;
}
.content {
  height: 150px;
  flex-grow: 1;
  border: 3px solid red;
  resize: vertical;
  overflow: auto;
}

<div class="container">
  <div class="content"></div>
</div>

另一种可能性是使用 overflow: auto。但是，不是使用 align-items:center 居中，而是使用 margin: auto 0.

.container {
  display: flex;
  height: 75px;
  border: 3px solid blue;
  overflow: auto;
  resize: vertical;
}
.content {
  height: 150px;
  flex-grow: 1;
  margin: auto 0;
  border: 3px solid red;
}

<div class="container">
  <div class="content"></div>
</div>

Css 弹性溢出问题

Css flex overflow issue

css

flexbox