Flex容器元素布局问题：如何让msger占满屏幕高度

要实现你需要的布局，核心是解决百分比高度无效的问题，并调整Flex容器的布局属性，具体步骤如下：

1. 确保根元素占满视口高度 #

浏览器默认的html和body高度由内容决定，而非视口高度，需要先设置它们占满整个屏幕：

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. 调整Flex父容器样式 #

移除会导致子元素垂直居中挤在一起的justify-content: center，并让容器至少占满视口高度：

.flex {
  display: flex;
  flex-direction: column;
  align-items: center; /* 保持子元素水平居中 */
  min-height: 100vh;
}

3. 修改.msger的高度设置 #

原来的height: calc(100% - 50px)无效，是因为父容器没有明确的高度基准。改用vh（视口高度单位）直接基于屏幕视口计算，同时保留上下margin：

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 80%;
  max-width: 80%;
  margin: 25px 10px;
  height: calc(100vh - 50px); /* 视口高度减去上下margin总和（25px*2） */
  border: var(--border);
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  min-width: 80%;
  /* 可选：如果.msger内部内容过多，添加滚动条避免溢出 */
  overflow-y: auto;
}

4. 保持.chart-container样式不变 #

它会自动排列在.msger下方，根据自身内容高度占用空间，此时整个页面总高度会超过视口，浏览器会自动显示垂直滚动条。

内容的提问来源于stack exchange，提问作者BlackHawk