假设我们有以下标记
<div id="parent">
<div id="header">
</div>
<div id="content">
</div>
</div>
header div是可变大小的，所以我们不知道第二个确切的偏移量。我们希望实现以下两个目标：
第二个div不应该溢出其父级。如果发生溢出，则会出现滚动条。
如果可能，应该以纯CSS方式完成，对于IE9 +。
我一直在想这个任务很简单，真的，我只是希望我的div没有溢出，这就是全部，但我发现即使使用flexbox也不行。
当我说overflow时，我指的是垂直溢出，因为它们都具有相同的宽度。
答案 0 :(得分：1)
使用Flexbox执行此操作非常简单，只需在父flex-direction: column上设置overflow-y: auto，在content设置#parent {
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
width: 200px;
}
#header {
background: lightblue;
}
#content {
flex: 1;
overflow-y: auto;
background: lightgreen;
}。
<div id="parent">
<div id="header"><br><br><br></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa consequuntur repellat ex, ut cumque fugit minus, itaque omnis, cum quidem in debitis. Consequuntur perspiciatis corporis nostrum similique eveniet voluptates cumque molestias rerum, distinctio accusamus? Quas explicabo, ea praesentium ad velit rem accusamus officia quibusdam ut accusantium possimus dignissimos dolores ipsum quia placeat tenetur omnis veritatis molestias voluptatibus consequuntur odit consectetur vero, voluptas corporis laudantium! Rem laborum excepturi quia temporibus, veniam blanditiis tempore eaque nostrum suscipit, quam laboriosam ratione provident obcaecati iste magni molestiae explicabo quibusdam expedita veritatis officia, debitis officiis sed. Neque veniam eius saepe. Quo doloremque, repellat mollitia!</div>
</div><div class="load-more" data-role="more" style="">
<a href="#" data-action="more-posts" class="btn load-more__button">Show more</a>
</div>