滚动查找具有flex-grow的元素

Question

我有两列，一个固定宽度的列在左边，一个列在右边，填充了屏幕的其余部分，我用overflow scroll在右边的列中添加了一个元素inner-scroll，但是滚动没有显示，父列只是被展开了，这为整个窗口创建了一个滚动。

我不能添加溢出:滚动到右列类，因为我不希望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

代码中的问题是，您已经使用flex:0 0 200px给出了.left-column flex的宽度，因此每次都需要200px。但是你根本没有给下一个flex一个width，因此它需要直到除法结束，overflow不工作。我已经添加了一些宽度的left和rightcolumn，然后我添加了溢出，它工作。希望这就是你要找的。

​

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

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

.right-column {
  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" style="overflow-x:auto;">
      <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>

​

Answer 2

由于内容太多，右栏从视区中消失。必须限制.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>

​