Question

我有两栏。左列应指示右列的高度，但其自身的高度将有所不同。如果左列有更多项目，则右列应增加以匹配它。如果右列有更多项目，则应将其停在左列的高度，然后滚动。

我尝试过使用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>

Answer 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>

使列高与动态同级匹配

1 个答案: