Почему переполнение-у может повлиять на горизонтальное расположение в flex?

Question

Рассмотрим следующую гибкую компоновку:

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>

Если разрешение экрана не слишком высокое, вы увидите то, чего я не ожидаю: правый столбец не только соответствует высоте и получает вертикальную прокрутку, но также сжимается и получает горизонтальную прокрутку. Это почему? Это не просто ширина вертикальной полосы прокрутки: переключите overflow-y из .right с 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 a 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 делений, 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>