在匹配其他元素的大小

Question

有一些问题非常相似，但经过一番我很确定没有任何内容涵盖这个问题。与this question类似，但我想要一个flex元素而不是静态大小的图片。

使用flexbox我希望能够让一个元素与所有其他元素的高度（横轴）匹配，如果该元素中的内容溢出，则呈现滚动，而不是增加容器的高度。

我设置了一个简单的JSFiddle来表明我的意思。

基本上我希望蓝色部分折叠并呈现滚动条，如果它将比红色向下延伸，而不是垂直延伸Flexbox。

我尝试了一些事情，我能得到的最接近的是：

设置＆＃34; .element2＆＃34; {min-height：0;高度：0;和＆＃34; .body＆＃34; {overflow-y：auto; }

doesn't scroll但是第一个元素的大小正确。

如果有更简单的解决方案，我们将不胜感激，并且我不会使用flexbox。

第一个小提琴代码：

＆＃13;

＆＃13;

.container{
  display:inline-flex;
}

.element1{
  background-color:red;
}

.element2{
  min-width:180px;
}

.title{
  background-color:green;
}

.body{
  background-color:blue;
}

＆＃13;

<div class="container">
  <div class="element1">
    I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. 
  </div>
  <div class="element2">
    <div class="title">
      v Needs scrollbar v
    </div>
    <div class="body">
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
      Scroll Element <br/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您知道＆＃34;红色＆＃34;的高度框，只需为＆＃34;蓝色＆＃34;创建一个max-height框并使用overflow-y: scroll。

Answer 2

• 使用position: relative制作正确的列overflow-y: auto以便在需要时滚动

• 使用position: absolute，top和left制作正确的列的孩子right并正确定位。

孩子们将不再占据身高，让盒子自由地长高和收缩。

示例1 - 标题滚动

对于正确的列，min-height可能是一个好主意。

＆＃13;

＆＃13;

.container {
  display: inline-flex;
}
.element1 {
  background-color: red;
}
.element2 {
  min-width: 180px;
  overflow-y: auto;
  position: relative;
  min-height: 50px;
}
.element2 > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.element2 .body {
  top: 1em;
}
.title {
  background-color: green;
}
.body {
  background-color: blue;
}

＆＃13;

<div class="container">
  <div class="element1">
    I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT.
    I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT.
  </div>
  <div class="element2">
    <div class="title">
      v Needs scrollbar v
    </div>
    <div class="body">
      Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>Scroll Element
      <br/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例2 - 标题是固定的

我们可以通过在overflow-y: auto元素上放置position: absolute和.body来确定标题。我们使用bottom: 0限制其高度，将其延伸到其父级的底部（.element2）

＆＃13;

＆＃13;

.container {
  display: inline-flex;
}
.element1 {
  background-color: red;
}
.element2 {
  min-width: 180px;
  position: relative;
  min-height: 50px;
}
.element2 .body {
  overflow-y: auto;
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  bottom: 0;
}
.title {
  background-color: green;
}
.body {
  background-color: blue;
}

＆＃13;

<div class="container">
  <div class="element1">
    I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT.
    I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT.
  </div>
  <div class="element2">
    <div class="title">
      v Needs scrollbar v
    </div>
    <div class="body">
      Scroll Element
      <br/>Scroll Element 1
      <br/>Scroll Element 2
      <br/>Scroll Element 3
      <br/>Scroll Element 4
      <br/>Scroll Element 5
      <br/>Scroll Element 6
      <br/>Scroll Element 7
      <br/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;