如何使我的 flex 列在绝对定位的容器中具有相同的高度？答案

【问题标题】：How can I make my flex columns have equal height in an absolutely positioned container?如何使我的 flex 列在绝对定位的容器中具有相同的高度？
【发布时间】：2022-04-28 22:16:05
【问题描述】：

我已经绝对定位div.container。 div.wrapper 在里面。和div.wrapper 中的两个 div 作为 flex 列。这些列有背景。

如何使这些背景到达最长列的末尾（即使它们具有相同的高度），而不仅仅是容器的可见高度？我无法从div.container 中删除position: absolute。

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.div1 {
    background-color: yellow;
}
.div2 {
    flex: 1;
    background-color: green;
}

<div class="container">
    <div class="wrapper">
        <div class="div1">
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
            <p>Some long content here</p>
        </div>
        <div class="div2">
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
            <p>Some even longer content here</p>
        </div>
    </div>
</div>

CodePen link

【问题讨论】：

您需要从容器样式中删除 display: flex 和 flex-direction: column，您的包装器已经有了 flex - 更新了 codepen codepen.io/kejt/pen/EvdyQy
谢谢你，Kejt。但是现在如果内容很短（它是动态的），它不会占用所有可用空间，比如这里：codepen.io/anon/pen/PKybvK。有没有办法保留这个功能？
您可以尝试将min-height: 100vh; 添加到您的容器和包装器codepen.io/kejt/pen/gxBgOG

标签： html css flexbox

【解决方案1】：

删除 container 上的 flex 属性。

我还从.wrapper 中删除了align-items: stretch; width: 100%;，因为它是它们的默认值，不需要设置。

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /*  commented out these 2 lines
    display: flex;
    flex-direction: column;
  */
  overflow: auto;
}

.wrapper {
  min-height: 100%;
  display: flex;
  /*  commented out these 2 lines as they are not needed
    align-items: stretch;
    width: 100%;
  */
}

.div1 {
  background-color: yellow;
}

.div2 {
  flex: 1;
  background-color: green;
}

p {
  padding: 20px 10px;
}

<div class="container">
  <div class="wrapper">
    <div class="div1">
      <p>Some long content here</p>
      <p>Some long content here</p>
      <p>Some long content here</p>
    </div>
    <div class="div2">
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
      <p>Some even longer content here</p>
    </div>
  </div>
</div>

【讨论】：