通常，为了使
overflow:scroll（或
auto和
hidden）起作用，需要以一种或另一种方式来设置高度限制，否则元素的大小通常会增长到适合其内容的程度。
主要有3种方法，其中一个是设置实际高度，如在第一个示例中一样，我将其添加到
container。
堆栈片段1
.container { display: flex; height: 100vh;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { flex: 1 1 auto; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div > <div > <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div > <div > <p>Small controls area. Panel below should scroll vertically.</p> </div> <div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> </div></div>或使用绝对定位来创建该 高度约束 ，而绝对元素会这样做。
只需使用一个额外的包装器即可完成
content-scroll，并使其他结构保持完全动态。
堆栈摘要2
.container { display: flex;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { position: relative; flex: 1 1 auto; width: 400px;}.content-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div > <div > <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div > <div > <p>Small controls area. Panel below should scroll vertically.</p> </div> <div > <div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> </div> </div></div>单独使用Flexbox，以为它可能无法完全跨浏览器运行，特别是对于仍支持它的旧版本，但它的bug很大。
原始代码中的简单修复方法是将
flex: 1 1 auto;in 更改
.content-wrapper为
flex: 1 10px;（
0px我的IE版本需要使用，Chrome / Firefox / Edge可以使用
0）
堆栈摘要3
.container { display: flex;}.child { border: 1px solid grey; background-color: lightgrey; flex: 1 1 auto;}.controls-panel { display: flex; flex-direction: column;}.controls { flex: 0 0 auto;}.content-wrapper { flex: 1 1 0px; width: 400px; overflow-y: auto;}.content-item { display: inline-block; width: 100px; height: 100px; background-color: red;}<div > <div > <p>In real life I am an inline img.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I am some content whoop de doo.</p> <p>I want my sibling to equal my height.</p> </div> <div > <div > <p>Small controls area. Panel below should scroll vertically.</p> </div> <div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> </div></div>片段2和3也会回答您的问题
…通过垂直滚动列表，我看不到如何使其父级（第二个
.child）的高度与第一个高度匹配.child。
注意，如果右列中的顶部元素可以大于左列，则底部元素将需要最小高度，以防止其塌陷为0，例如
.content-wrapper { ... min-height: 200px;}
