为什么overflow-y可能会影响flex中的水平布局？

Question

考虑以下 flex 布局：

body {
  margin: 0;
}
.container {
  background: red;
  color: white;
  height: 100vh;
  display: flex;
}
.left {
  flex-grow: 1;
  height: 100%;
  padding: 1em;
}
.main-content {
  background: blue;
  height: 130%;
}
.right {
  height: 100%;
}
.side-content-upper {
  padding: 1em;
  height: 50%;
}
.side-content-lower {
  padding: 1em;
  height: 60%;
  background: black;
}

<div class="container">
  <div class="left">
    <div class="main-content">some some some some some some some some some some some some some some some some some some some some some</div>
  </div>
  <div class="right">
    <div class="side-content-upper">more</div>
    <div class="side-content-lower">more</div>
  </div>
</div>

由于.main-content 和.side-content-upper 的高度加上.side-content-lower 的高度大于100%，我们得到垂直溢出。现在让我们通过添加 box-sizing: border-box; overflow-y: scroll; 使第一列适合屏幕高度并单独滚动（为了使这更紧凑，我将未更改的 CSS 对齐为单行）：

body { margin: 0; }
.container { background: red; color: white; height: 100vh; display: flex; }
.left {
  flex-grow: 1;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  overflow-y: scroll;
}
.main-content { background: blue; height: 130%; }
.right {
  height: 100%;
}
.side-content-upper { padding: 1em; height: 50%; }
.side-content-lower { padding: 1em; height: 60%; background: black; }

<div class="container">
  <div class="left">
    <div class="main-content">some some some some some some some some some some some some some some some some some some some some some</div>
  </div>
  <div class="right">
    <div class="side-content-upper">more</div>
    <div class="side-content-lower">more</div>
  </div>
</div>

工作正常，不是吗？现在让我们将相同的样式应用到.right 容器：

body { margin: 0; }
.container { background: red; color: white; height: 100vh; display: flex; }
.left {
  flex-grow: 1;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  overflow-y: scroll;
}
.main-content { background: blue; height: 130%; }
.right {
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
}
.side-content-upper { padding: 1em; height: 50%; }
.side-content-lower { padding: 1em; height: 60%; background: black; }

<div class="container">
  <div class="left">
    <div class="main-content">some some some some some some some some some some some some some some some some some some some some some</div>
  </div>
  <div class="right">
    <div class="side-content-upper">more</div>
    <div class="side-content-lower">more</div>
  </div>
</div>

如果您的屏幕分辨率不是太高，您会看到我没有预料到的情况：右列不仅适合高度并获得垂直滚动，还会缩小并获得水平滚动。这是为什么？看起来不仅仅是垂直滚动条的宽度：将.right 的overflow-y 从scroll 切换到hidden，您将再次得到.right 变形。我很困惑如何对此进行推理。以防万一，这就是我看到的hidden：

Answer 1

这里有两个“修复”，说明它的价值 - 我知道您正在寻找解释而不是解决方案，但希望这将有助于通过示例进行解释。我不确定我能详细说明这里发生的事情的复杂性，但它基本上与滚动条与盒子模型交互的方式有关，以及 flex 如何处理尺寸。如果有更多知识渊博的人可以提供一些启发，请加入。

给right div 赋予它自己的flex 属性：

body { margin: 0; }
.container { background: red; color: white; height: 100vh; display: flex; }
.left {
  flex: 5;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  overflow-y: scroll;
}
.main-content { background: blue; height: 130%; }
.right {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
}
.side-content-upper { padding: 1em; height: 50%; }
.side-content-lower { padding: 1em; height: 60%; background: black; }

<div class="container">
  <div class="left">
    <div class="main-content">some some some some some some some some some some some some some some some some some some some some some</div>
  </div>
  <div class="right">
    <div class="side-content-upper">more</div>
    <div class="side-content-lower">more</div>
  </div>
</div>

给.side-content-upper 和.side-content-lower 一个box-sizing: border-box 属性。

body { margin: 0; }
.container { 
  background: red; 
  color: white; 
  height: 100vh; 
  display: flex;
}
.left {
  flex: 1;
height: 100%;
padding: 1em;
box-sizing: border-box;
overflow-y: scroll;
}
.main-content { background: blue; height: 130%; }
.right {
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
}
.side-content-upper { padding: 1em; box-sizing: border-box; height: 50%; width: 100%;       }
.side-content-lower { padding: 1em; box-sizing: border-box; height: 60%; background: black; width: 100%;}

<div class="container">
  <div class="left">
    <div class="main-content">some some some some some some some some some some some some some some some some some some some some some</div>
  </div>
  <div class="right">
    <div class="side-content-upper">more</div>
    <div class="side-content-lower">more</div>
  </div>
</div>

最后一点：当你给left 和right div 提供溢出时，container 失去了隐含的overflow: auto，它为你的元素间隔。这导致了缩小问题 - 如果您在上次演示中将 overflow-y: scroll 添加回容器上，则元素将恢复其原始比例。

Answer 2

可以使用java脚本来帮助你通过可用的屏幕高度 首先添加 jquery.js

<script type="text/javascript">
 $(document).ready(function(){
  var y = screen.availHeight;
  $(".container").css('height',y +'px');
  $(".left").css('height',y +'px');
  $(".right").css('height',y +'px');
  $(".main-content").css('height',(y * 1.3) +'px');
  $(".side-content-upper").css('height',(y * .5) 
  +'px');
  $(".side-content-lower").css('height',(y * .6) 
  +'px');
 });
</script>   
<style type="text/css">
 body { margin: 0; }
 .container{ 
  background: red;
  color: white;
  display: flex;
  flex-wrap:wrap;
 }
 .left {
  flex-grow: 1;
  padding: 1em;
  box-sizing: border-box;
  overflow-y:scroll;
 }
 .main-content{ background: blue;}
 .right{box-sizing: border-box;overflow-y: scroll;}
 .side-content-upper { padding: 1em;  }
 .side-content-lower { padding: 1em;  background: 
  black; }
</style>