Flex布局问题:高度大于屏幕，窗格西和窗格中没有显示垂直滚动条。
<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>
您可以做的是:使用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>