CSS：根据 flex 容器中的相邻 div 调整 div 高度答案

【问题标题】：CSS : adjust a div height according to the neighbor div in a flex containerCSS：根据 flex 容器中的相邻 div 调整 div 高度
【发布时间】：2021-11-22 20:15:45
【问题描述】：

我有一个我无法通过 myslef 解决的问题，尽管它看起来很简单。

在网页上，我有一个 flex 容器 div，其中包含 2 个其他 div。第一个 div 只不过是为在鼠标悬停时触发某些操作而保留的空间（通常是打开菜单）。第二个 div 根据一些参数和用户操作动态填充元素。（例如，用户点击一个按钮会触发一个新的 textarea 字段的创建）。

所以，第二个div可能会越来越高。

有没有办法让第一个 div 自动跟随第二个 div 的高度，即使第二个 div 溢出？

这是我所做的一个基本示例：

HTML

<div id='wrapper'>
  <div id="div1">
    -
  </div>

  <div id="div2">
    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>
  </div>

  <div>
  </div>
</div>

CSS

#wrapper {
    display: flex;
    align-items: flex-start;
    flex-flow: row;
    justify-content: flex-start;
}

#div1 {
    background-color: mediumblue;
  width: 20px;
  color: mediumblue;
}

.yellowDiv {
  background-color: yellow;
  border: solid 2px;
  height: 100px;
}

在本例中，黄色 div 模拟动态填充的 div，蓝色 div 模拟我想用来触发菜单打开的那个。

有没有办法通过 flexbox 实现这一点？

提前感谢您的帮助。

问候，

【问题讨论】：

嗨，看看这个，也许你在找什么：newbedev.com/…

标签： css flexbox height

【解决方案1】：

不使用flex，但您应该尝试使用grid。

#wrapper {
    display: grid;
  grid-template-columns: 20px 100px;
  height: min-content;
}

#div1 {
    background-color: mediumblue;
  width: 20px;
  color: mediumblue;
}

.yellowDiv {
  background-color: yellow;
  border: solid 2px;
  height: 100px;
}

<div id='wrapper'>
  <div id="div1">
    -
  </div>

  <div id="div2">
    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>

    <div class="yellowDiv">
      One element
    </div>
  </div>

  <div>
  </div>
</div>

可以查看上面的代码sn-p。

围绕该概念的理论：如果您不指定grid-template-rows 的特定值，那么它将使所有列的大小最大。

如果您有任何问题，请告诉我:)

【讨论】：