css - Flex 布局问题:高度大于屏幕,pane-west 和 pane-center 没有显示垂直滚动条

Flex 布局问题:高度大于屏幕,pane-west 和 pane-center 没有显示垂直滚动条。

<html>
<head>
    <style>

        .pane-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0
        }

        .pane-north, .pane-south {
            border: 1px solid red;
            flex: 0 0 auto;
            background: blue;
        }

        .middle-row {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

        .pane-west {
            flex: 0 0 auto;
            width: 200px;
            overflow: auto;
            border: 1px solid green;
            flex: 0 0 auto;
            background: green;
        }

        .pane-center {
            flex: 1 1 auto;
            overflow: auto;
            border: 1px solid yellow;
            background: yellow;
        }
    </style>
</head>

<body class="pane-container">

<div class="pane-north">
    north <br/> north <br/>north <br/>north
</div>

<div class="middle-row">

    <div class="pane-west">
        <div style="width: 500px; height: 1600px">
            west
        </div>
    </div>

    <div class="pane-center">
        <div style="width: 700px; height: 2000px">
            center
        </div>
    </div>

</div>

<div class="pane-south">
    south <br/> south <br/>south <br/>south
</div>

</body>
</html>

回答1

您可以执行以下操作:使用 overflow-y: scroll 来控制滚动条出现的位置,而不是使用 overflow:auto。另一件事是将 height in numbers 添加到您使用 overflow: scroll 的元素中,否则它将不起作用。在这里你可以看到一个例子:

.pane-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      .pane-north,
      .pane-south {
        border: 1px solid red;
        flex: 0 0 auto;
        background: blue;
      }

      .middle-row {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
      }

      .pane-west {
        flex: 0 0 auto;
        width: 200px;
        overflow: scroll;
        border: 1px solid green;
        flex: 0 0 auto;
        background: green;
        height: calc(100vh - 75px);
      }

      .pane-center {
        flex: 1 1 auto;
        overflow: scroll;
        border: 1px solid yellow;
        background: yellow;
        height: calc(100vh - 75px);
      }
<html>
  <head>
  </head>

  <body class="pane-container">
    <div class="pane-north" style="height: 75px;">
      north <br />
      north <br />north <br />north
    </div>

    <div class="middle-row">
      <div class="pane-west">
        <div style="width: 500px; height: 1600px">west</div>
      </div>

      <div class="pane-center">
        <div style="width: 700px; height: 2000px">center</div>
      </div>
    </div>

    <div class="pane-south">
      south <br />
      south <br />south <br />south
    </div>
  </body>
</html>

相似文章

html - 冻结 table 前两列

我有一个结构有点复杂的table,因为它有colspan和多个标题。我需要修复我的table前两列,其余列应该可以水平滚动。我尝试了各种示例来冻结列,但没有按预期工作。以下是我提到的链接。我希望在活动...