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的最高位置。即使最理想的情况也会保留padding-top的{{1}}和.container的{{1}}值。溢出的底部是可以的，事实上它是我的偏好。

有任何解决方法吗？

Answer 1

您可以.container height灵活：使用min-height代替height。

＆＃13;

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

＆＃13;

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

＆＃13;

另一种可能性是使用overflow: auto。但是，请使用align-items:center。

，而不是使用margin: auto 0居中

＆＃13;

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

＆＃13;

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

＆＃13;

Css flex溢出问题

1 个答案: