时间戳

首页 > 解决方案 > 滚动具有 flex-grow 的元素

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

问题描述

我有 2 列，左侧的固定宽度列和右侧的列填充屏幕的其余部分，我inner-scroll在右列中添加了一个元素，overflow 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;
}

标签： css

解决方案

由于内容过多，右栏从视口中脱落。您必须限制.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>

推荐阅读