css - 组件超出 flex 容器

Question

我在设置组件的样式时遇到问题，该组件的高度比它所在的 flex 容器高。我想要实现的是，如果组件的高度比 flex 容器高，则该组件会出现滚动。页脚应始终位于父容器的底部。我知道height: 0从下面的示例中添加到 table 元素可以解决问题，但这似乎不是解决问题的正确方法。

Stackblitz：https://stackblitz.com/edit/js-myxsza?file=index.html`

.container {
  width: 80vw;
  height: 50vh;
}

.wraper1 {
  background: green;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.title {
  margin-bottom: 30px;
}

.body {
  flex-grow: 1;
}

.component-wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}

/* table {
  height: 0;
} */

<div class="container">
  <div class="wraper1">
    <div class="title">Title</div>
    <div class="body">
      <div class="component-wraper">
        <table>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
          <tr><td>1</td></tr>
        </table>
      </div>
    </div>
    <div class="footer">footer</div>
  </div>

</div>

标签： csssassflexboxstyles

Answer 1

在正文中使用溢出：自动

.body {
flex-grow: 1;
overflow: auto;
}

页脚也可见。