溢出容器的相同高度子级答案

【问题标题】：same height children of overflow container溢出容器的相同高度子级
【发布时间】：2022-11-24 16:32:00
【问题描述】：

我搜索了可用的问题，但没有找到我的解决方案。

我正在尝试将水平溢出容器的所有元素的高度设置为等于最长容器的高度。

body {
    
}
section{
    width: 300px;
    background: lightblue;
    overflow: auto;
    white-space: nowrap;
}
div{
    display: inline-block ;
    max-width: 150px;
    background: lightgreen;
    margin: 5px;
    white-space: normal;
    
    /* not working */
    height: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <section>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
            </div>
            <div>
                hi there how are you push just IV by Rd hi TX cu
            </div>
        </section>
    </body>
</html>

如您所见，第二个 div 最长。其他 div 应该等于第二个。另外，我不需要固定高度。

【问题讨论】：

谁能解决这个问题？
div 的最小宽度是多少？不能在 div 上设置 min-width，例如 min-width: 150px？

标签： css

【解决方案1】：

你可以使用 Flex 布局。

section{
  width: 300px;
  background: lightblue;
  overflow: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
div{
  display: inline-block ;
  max-width: 150px;
  background: lightgreen;
  margin: 5px;
  white-space: normal;
  height: 100%;
}

【讨论】：

【解决方案2】：

在divs 上设置min-width 并使其父级flex 不能被包装。

section {
  display: flex; /* new */
  flex-wrap: nowrap; /* new */
  width: 300px;
  background: lightblue;
  overflow: auto;
}

div {
  min-width: 150px; /* new */
  background: lightgreen;
  margin: 5px;
}

<section>
  <div>
    hi there how are you push just IV by Rd hi TX cu
  </div>
  <div>

    hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi

  </div>
  <div>
    hi there how are you push just IV by Rd hi TX cu
  </div>
</section>

我使用了min-width: 150px;。您可以更改该值。

【讨论】：