保持儿童 div 的高度不变

Question

我希望保持两个子 div 的高度 abc 和 def 不变，并且每个 div 的高度都是其父级 xyz 的一半。我可以在 CSS 中使用 flex 来做到这一点，但是在每个子 div abc 和 def 中，我都有动态添加行的表。这会导致 div abc 和 def 扩展以容纳行。

当添加太多行时，我希望它们中的每一个都可以滚动。

我尝试了很多解决方案，但似乎都没有。

这是我的代码：

#xyz {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
}
#abc {
  width: 100%;
  flex: 1;
}
#def {
  width: 100%;
  flex: 1;
}

<div id="xyz" class="row">
  <div id="abc" class="col-border-bottom container-fluid">
    <h2>ABC details</h2>
    <table id="abc-table"></table>
  </div>
  <div id="def" class="container-fluid">
    <h2>DEF details</h2>
    <table id="def-table"></table>
  </div>
</div>

提前致谢。

Answer 1

给子 div 'overflow:scroll' 和 'height:[something]'。

Answer 2

如果您使用flexbox 来获取溢出，则应将 flexbox 子项的内容包装到 absolutely 定位的容器中，以便它可以在溢出时滚动。

以下是我在您的代码中所做更改的摘要：

1. 为了演示溢出，为xyz 容器设置一个特定的高度。您可以根据需要更改此高度。

2. 将 position: relative 和 overflow-y: auto 添加到 flexbox 子组件 - abc 和 def。

3. 将abc 和def 的内容包装到一个绝对定位的框中：

   .flex-inner {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
   }
   

4. 在框中添加了一些边框和表格以进行说明。

* {
  box-sizing: border-box;
}
#xyz {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  height: 250px;
  border: 1px solid;
}
#abc {
  width: 100%;
  flex: 1;
  border: 1px solid;
  position: relative;
  overflow-y: auto;
}
#def {
  width: 100%;
  flex: 1;
  border: 1px solid;
  position: relative;
  overflow-y: auto;
}
.flex-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}
table td {
  border: 1px solid red;
}

<div id="xyz" class="row">
  <div id="abc" class="col-border-bottom container-fluid">
    <div class="flex-inner">
      <h2>ABC details</h2>
      <table id="abc-table">
        <tr>
          <td colspan="2">Title</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
      </table>
    </div>
  </div>
  <div id="def" class="container-fluid">
    <div class="flex-inner">
      <h2>DEF details</h2>
      <table id="def-table">
        <tr>
          <td colspan="2">Title</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
        <tr>
          <td>row</td>
          <td>row</td>
        </tr>
      </table>
    </div>
  </div>
</div>