垂直对齐两个div

Question

我有两个div：

1. div1和div2应该低于另一个。
2. div2将位于底部
3. div1应调整到div2
以上的其余高度
4. div1也应该有一个滚动条（div2不需要滚动条）

代码段

<div id="outer">
  <div id="div1" style="position:relative;overflow-y:scroll;width:340px;float:left;display:inline-block"></div>
  <div id="div2" style="float:left;clear:left;display:inline-block"></div>
</div>

我该怎么做？

Answer 1

Flexbox以此为生。

＆＃13;

＆＃13;

.container {
  height: 100px;
  display: flex;
  flex-direction: column;
  outline: 1px red solid;
}

.div1 {
  flex-grow: 1;
  overflow-y: scroll;
  width: 340px;
}

.div2 {
  border-top: 1px blue solid;
}

＆＃13;

<div class="container">
  <div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div class="div2">I am div 2.</div>
</div>
                        

＆＃13;

＆＃13;

＆＃13;

Answer 2

要激活overflow-y，即.div1内容中的滚动条，其中的内容需要overflow，如下所示

＆＃13;

＆＃13;

#outer{
  width:100%;
  height:auto;
}
#outer > .div1{
  width:400px;
  height:250px;
  background:#f2f;
  overflow-y:scroll;
}
#outer > .div2{
  width:400px;
  height:auto;
  background:#f22;
}

＆＃13;

<div id="outer">
  <div class="div1">Div1 Demo text Demo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo text Demo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo text.</div>
  <div class="div2">Div2</div>
</div>

＆＃13;

＆＃13;

＆＃13;