html - 将列高与动态兄弟匹配

<分区>

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

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

最佳答案

我整理了一个工作示例供您引用。这里的要点是使用 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>

关于html - 将列高与动态兄弟匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56585413/

上一篇：html - 使英雄形象响应

下一篇：javascript - 如何在不影响可见性的情况下为 Instagram Logo 添加颜色渐变？

相关文章：

javascript - 激活服务器时间上的单选按钮

html - 如何在汉堡菜单中加入链接？

html - XPath 选择在某些具有不同文本的 div 之前出现的输入

html - 显示 flex 在导航栏中不起作用

html - 百分比高度在 Chrome 中的嵌套 flexbox 布局中不起作用

html - Flexbox，在可用空间内限制图像的高度/宽度

javascript - 如何判断HTML元素是否有伪元素？

javascript - 从 jSTL c :forEach ( function not defined) on page load 调用 jQuery 函数

css - Typo3:8.7.9 CKeditor 保存后删除 block 样式

css3变换比例切掉图像的上三分之一