收缩老二总是适合父母

Question

假设我们有下面的标记

<div id="parent"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
</div> 

header DIV是大小可变的，所以我们不知道什么确切的偏移得到第二个。我们要完成以下两个目标：

1. 第二个div永远不应该溢出其父项。如果发生溢出，则会出现滚动条。

2. 它应该以纯CSS的方式完成，如果可能的话，IE9 +。

我一直在想，这个任务是很容易的，真的，我只想我的div是非四溢，这一切，但我发现，这是不可能的，即使Flexbox的。

当我说overflow我的意思是垂直溢出，因为它们都是相同的宽度。

Answer 1

用Flexbox这样做很简单，只需在父母上设置flex-direction: column，然后在content上设置overflow-y: auto。

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