将列高与动态兄弟匹配[重复]答案

【问题标题】：Match column height to dynamic sibling [duplicate]将列高与动态兄弟匹配[重复]
【发布时间】：2019-06-14 02:28:32
【问题描述】：

我有两列。左栏应规定右栏的高度，但其自身的高度会有所不同。如果左列有更多项目，右列应该增长以匹配它。如果右列有更多项目，它应该停在左列的高度，然后滚动。

我尝试过使用 flexbox，但似乎无法让它按我的意愿工作。我知道我可以使用 javascript 来做到这一点，但我确信一定有一个纯粹的 css 解决方案，我只是没有找到。

这是我目前拥有的：

<div class="row" style="display: flex;">
    <div class="col-xs-12" style="flex: 0 0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Panel 1 header</div>
            <div class="panel-body" style="background-color: red;">
                <ul>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-xs-12" style="flex: 0 0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Panel 2 header</div>
            <div class="panel-body" style="background-color: blue;">
                <ul>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>0 to many items</li>
                    <li>scroll</li>
                    <li>scroll</li>
                </ul>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

包括您尝试过的 HTML 和 CSS。
看起来这是一个重复但接受的答案可能不是你想要的，第二个是我认为：stackoverflow.com/a/49065029/33822
today : display: table/flex 或 grid 是简单的选项，在使用 faux-column 方法进行 inline-block 或 float 之前 alistapart.com/article/fauxcolumns 这可能是 Web 上关于 CSS 的最常见问题。 ..你怎么找不到线索？

标签： html css flexbox

【解决方案1】：

我整理了一个工作示例供您参考。这里的重点是使用display: flex，它会解决你的问题：

* {
  box-sizing: border-box;
}
.container {
  background: pink;
  display: flex;
  flex-flow: row nowrap;
  padding: 10px;
}
.container .box {
  background: lightblue;
  padding: 10px;
  flex: 0 0 auto;
  width: 50%;
}

<div class="container">
  <div class="box">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae asperiores dolorem iure quas repellat quibusdam accusantium odit unde rem autem.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt voluptatum unde nesciunt consequatur ipsa voluptas et nemo. Alias eum, culpa labore fugiat veniam vero nemo aut cumque animi, consequatur temporibus sed officia. Officia quis veniam laudantium deserunt sit adipisci labore mollitia quo perspiciatis facere. Voluptatem fugiat rem temporibus consequuntur quidem!</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente sint corrupti alias at enim, inventore iure similique quis quod veritatis eaque est ab aliquam incidunt officia, neque veniam. Molestiae, voluptates repellat alias incidunt voluptas culpa temporibus ad saepe laudantium vel!</p>
  </div>
</div>

【讨论】：