Проблемы CSS при использовании vh и vw с FlexBox

Question

Я хочу создать панель с ее основным содержимым (PAGE CONTENT) и составленным справа списком командных кнопок с заголовком. Вся страница должна уменьшаться или увеличиваться в зависимости от области просмотра (это будет использоваться на сенсорном планшете, поэтому для альбомной / портретной ориентации необходимо пропорционально изменить размер всех элементов).

Вот мой фрагмент кода HTML:

.panel-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 0px;
}

.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}

.panel-container-right {
  justify-self: flex-end;
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

Я не могу заставить работать правильную панель. Мне нужно, чтобы все кнопки были одинакового размера и одинакового размера для заголовка и кнопки панели. Если высота кнопок в стеке увеличивается, мне нужно прокрутить-y, но никогда не выходить за границы экрана и не терять пропорциональный размер по сравнению с заголовком и кнопкой на панели.

В настоящее время кнопки панели сжимаются, чтобы держать все 10 кнопок в поле зрения, где я хотел использовать y-прокрутку с кнопками того же размера, что и кнопки панели.

Answer 1

Я задокументировал все изменения в CSS. Надеюсь, это поможет.

.panel-container {
  width: 100%;
  display: flex;
  /* flex-direction: row; NOT NECESSARY, IS THE DEFAULT */
  padding: 0px;
  margin: 0px;
}

/* NOT NECESSARY
.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}
*/

.panel-container-right {
  /* justify-self: flex-end; THIS DOES NOT EXIST */
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    /* display: flex; 
    flex-direction: column; */
    width: 100%;
    height: 80vh; /* TITLE IS 10VH + A BIT EXTRA FOR THE EFFECT */
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

Answer 2

Если я правильно понял, вы должны попытаться установить максимальную ширину правой панели равной 100vh, а затем добавить overflow-y для прокрутки.

.panel-container-right {
  max-height: 100vh;
  overflow-y: scroll;
}