html - 在 FlexBox 中使用 vh 和 vw 的 CSS 问题

Question

我想构建一个面板，其中包含主要内容 (PAGE CONTENT) 和一个带有标题的右侧堆叠命令按钮列表。整个页面必须根据视口(viewport)缩小或增大(这将在触摸平板电脑上使用，因此横向/纵向 View 需要按比例调整所有元素的大小)。

这是我的 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 个按钮都在 View 中，我想要一个带有与面板按钮大小相同的按钮的 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>