使用flex将高个子放入较短的父级中

Question

我有第三方，可滚动，100％高度元素（我不想修改）。我想把它放在父div中，所以它将填满剩下的所有空间。

我试图使用Flex这样做。 （参见代码段）。 我遇到的问题是，由于第3部分元素的内容，子div比父母高。 有没有办法让flex缩小子项以适应父级的剩余大小？

编辑：如果可能的话，我想避免任何硬编码的数字，并让flex动态调整大小，以便tall_child符合剩余的父级大小。

＆＃13;

＆＃13;

.parent {
  background-color : blue;
  height : 50vh;
  display : flex;
  flex-direction: column;
}


.header {
  background-color : red;
  height : 50px;
  width : 80%
}

.tall_child {
  background-color : green;
  width : 80%;

  /* 
  I want the height of the this child to be determined automaticlly by flex to fit remaining space of parent 
  */
}

.scrollable_3rd_party_element {
  height : 100%;
  overflow : scroll;
  border-style: solid;
  border-width: 5px;
}

＆＃13;

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将max-height:50px添加到.scrollable_3rd_party_element

＆＃13;

＆＃13;

.parent {
  background-color : blue;
  height : 100px;
  display : flex;
  flex-direction: column;
}


.header {
  background-color : red;
  height : 50px;
  width : 80%
}

.tall_child {
  background-color : green;
  width : 80%;

  /* 
  I want the height of the this child to be determined automaticlly to fit parent
  height : 50px; 
  */
}

.scrollable_3rd_party_element {
  height : 100%;
  overflow : scroll;
  border-style: solid;
  border-width: 5px;
  max-height: 50px
}

＆＃13;

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

对于此特定示例父级大小，50px有效。但我想要   无论父母大小

，它都有效

然后您需要在flex:1

中使用min-height: 0和tall_child

  

我刚注意到它适用于Chrome，但不适用于野生动物园   OS-X。

     

底部边框现在被截断，而在chrome中看起来很完美

对safari OSX的快速修复是在overflow-x:hidden中添加.tall_child并将border从.scrollable_3rd_party_element更改为.tall_child

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}

.parent {
  background-color: blue;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: red;
  height: 50px;
  width: 80%
}

.tall_child {
  background-color: green;
  width: 80%;
  flex: 1;
  min-height: 0;
  /* safari fix*/
  overflow-x: hidden;
  border: 5px solid
}

.scrollable_3rd_party_element {
  height: 100%;
  overflow-y: scroll;

}

＆＃13;

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加flex: 1（允许tall_child获取可用的垂直空间）和min-height: 0（覆盖min-height: auto这是默认值）到.tall_child。

同时将box-sizing: border-box添加到.scrollable_3rd_party_element到包含 border的高度。也许最好使用overflow: auto代替scroll。

见下面的演示：

＆＃13;

＆＃13;

.parent {
  background-color : blue;
  height : 50vh;
  display : flex;
  flex-direction: column;
}


.header {
  background-color : red;
  height : 50px;
  width : 80%
}

.tall_child {
  background-color : green;
  width : 80%;

  /* 
  I want the height of the this child to be determined automaticlly to fit parent
  height : 50px; 
  */
  flex: 1;
  min-height: 0;
}

.scrollable_3rd_party_element {
  height : 100%;
  overflow : auto;
  border-style: solid;
  border-width: 5px;
  box-sizing: border-box;
}

＆＃13;

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为了在没有任何固定高度元素的情况下工作，你必须至少在标题和其余元素之间保留一些比例，这不是使用flexbox的问题：

.parent {
  background-color : blue;
  height : 50vh;
  display : flex;
  flex-direction: column;
}


.header {
  background-color : red;
  height : 15%;
  width : 80%
}

.tall_child {
  background-color : green;
  width : 80%;
  height: 85%;
}

.scrollable_3rd_party_element {
  height : 100%;
  overflow-y : scroll;
  border-style: solid;
  border-width: 5px;
  box-sizing: border-box;
}

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

Codepen demo

Answer 4

我发现的另一个选项受到How to make flexbox children 100% height of their parent?

的启发

不完美，因为它需要修改第三方元素＆＃34;位置＆＃34;和＆＃34;宽度＆＃34;。但它似乎几乎适用于chrome和safari（几个像素不对齐）。 也许有人会发现它是另一个有用的选择。

＆＃13;

＆＃13;

.parent {
  background-color : blue;
  height : 50vh;
  display : flex;
  flex-direction: column;
}


.header {
  background-color : red;
  height : 50px;
  width : 80%
}

.tall_child {
  background-color : green;
  width : 80%;
  flex-grow : 1;
  position: relative;
}

.scrollable_3rd_party_element {
  position: absolute;
  width : 100%;
  height : 100%;
  overflow : scroll;
  border-style: solid;
  border-width: 5px;
}

＆＃13;

<div class="parent">
  <div class="header">header</div>
  <div class="tall_child">
    <div class="scrollable_3rd_party_element">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;