滚动 Flexbox 网格

Question

我正在尝试制作一个基本的仪表板布局，其中包含三列和各种不同大小的框以容纳 graphs/tables/stats 等。我正在尝试使主仪表板成为一个可滚动的元素，其中包含导航栏和其他元素在它周围静止。我的问题是滚动不允许我滚动所有不同的框，只有 1 行的一半。如果有人能在这方面帮助我，那就太棒了！

body {
  overflow: hidden;
}

.app {
  overflow: hidden;
}

.dashboard {
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
</body>

Answer 1

您可以尝试将仪表板元素的高度设置为 100vh（或它需要的任何大小），这样滚动实际上知道它有多少实际空间。

.dashboard {
  width: 1280px;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div class="dashboard">
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
      <div class="table-box">
        <div class="table">
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="graph-box">
        <div class="graph">
        </div>
      </div>
    </div>
  </div>
</body>

滚动 Flexbox 网格

Scrolling Flexbox Grid

html

css

overflow

flexbox