Question

我希望保持两个孩子的身高，abc和def不变，每个孩子的身高都是其父亲{1}}的一半。我能够在CSS中使用xyz执行此操作，但在每个子div flex和abc中，我都有动态添加行的表。这会导致div def和abc展开以容纳行。

我希望在添加太多行时，每个都可以滚动。

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

这是我的代码：

＆＃13;

def

＆＃13;

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

＆＃13;

提前致谢。

Answer 1

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

以下是我在代码中更改内容的摘要：

要演示溢出，请为xyz容器设置特定高度。您可以根据自己的要求更改此高度。
将position: relative和overflow-y: auto添加到flexbox儿童 - abc和def。

将abc和def的内容整理到一个绝对定位的框中：

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

在方框中添加了一些边框和表格以供说明。

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

给孩子divs＆溢出：滚动＆＃39;和＆＃39;身高：[某事]＆＃39;。

保持儿童div的高度不变

2 个答案: