css - 滚动具有 flex-grow 的元素

Question

我有 2 列，左侧的固定宽度列和右侧的列填充屏幕的其余部分，我在右列中添加了一个元素 inner-scroll 和 溢出滚动 但滚动不显示，父列只是展开，为整个窗口创建滚动。

我无法添加 overflow: scroll to the right-column 类，因为我不希望 inner scroll 元素上方的顶部栏位于滚动内，我可以将其固定到内部元素的顶部，但我宁愿通过让内部元素显示滚动来让它工作。

https://stackblitz.com/edit/2-column-fixed-flex

如何让内部元素滚动？

.container {
  display: flex;
  height: 100vh;
  max-width: 100vw;
}

.left-column {
  flex: 0 0 200px;
  background: lightcoral;
}

.right-column {
  flex-grow: 1;
  background: lightgreen;
}

.inner-top-bar {
  background: lightskyblue;
  padding: 10px;
}

inner-right-column {
  position: relative;
  overflow: scroll;
}

Answer 1

由于内容太多，右栏从视口(viewport)中掉了出来。您必须限制 .right-column 宽度才能显示滚动条。例如 width: calc(100% - 200px)

结果

.container {
  display: flex;
  height: 100vh;
  max-width: 100vw;
}

.left-column {
  flex: 0 0 200px;
  background: lightcoral;
}

.right-column {
  /* flex-grow: 1; */
  width: calc(100% - 200px);
  background: lightgreen;
}

.inner-top-bar {
  background: lightskyblue;
  padding: 10px;
}

.inner-scroll {
  position: relative;
  overflow-x: scroll;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

td {
  padding: 5px 15px;
  width: 90px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #eee;
}

body {
  margin: 0;
}

<div class="container">
  <div class="left-column"></div>
  <div class="right-column">
    <div class="inner-top-bar">non-scroll top</div>
    <div class="inner-scroll">
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
        </tr>
      </table>
    </div>
  </div>
</div>