flex布局下子容器无法填满父容器高度且滚动异常求助

父容器.plcRemoteFormContainer采用Flex布局，子表单#plcRemoteForm需满足三个要求：水平居中显示、填满父容器全部高度、内容溢出时父容器显示滚动条。当前前两个要求已实现，但滚动条出现时，子容器无法填满父容器高度。

解决方案 #

1. 给父容器.plcRemoteFormContainer添加align-items: stretch，确保子元素在垂直方向自动拉伸至父容器高度，同时保留justify-content: center实现水平居中。
2. 给子表单#plcRemoteForm设置height: 100%和min-height: 100%，强制表单无论内容多少都匹配父容器高度；若需要限制表单宽度，可添加max-width属性优化居中显示效果。
3. 用box-sizing: border-box确保表单的内边距或边框不会额外增加总高度，避免超出父容器范围。

修改后的CSS代码 #

#host {
  height: 100%;
  width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 215px;
  overflow: auto;
  font-size: 0.875rem !important;
  line-height: 1.5;
  padding: 5px 10px 10px;
  background-color: #bbb;
}

#plc-remote-form {
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background-color: red;

  .upperMenuContainer {
    background-color: #0074c8;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    width: 100%;
    min-height: 26px;
  }
}

.plcRemoteFormContainer {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: stretch; /* 确保子元素垂直填满父容器 */
  background-color: #c5c5c5;
}

#plcRemoteForm {
  background-color: #ebebeb;
  height: 100%; /* 强制匹配父容器高度 */
  min-height: 100%; /* 内容不足时也保持父容器高度 */
  max-width: 800px; /* 可选：限制表单最大宽度，优化居中视觉效果 */
  width: 100%; /* 在max-width范围内占满可用宽度 */
  box-sizing: border-box; /* 避免内边距/边框增加总高度 */
  padding: 1rem; /* 可选：添加内边距提升内容可读性 */
}

原理说明 #

• align-items: stretch是Flex布局默认属性，但明确声明可避免因其他样式干扰导致的拉伸失效，保证子元素垂直方向填满父容器。
• height: 100%和min-height: 100%组合，既保证内容溢出时表单高度不超出父容器，又避免内容不足时高度塌陷。
• box-sizing: border-box让表单的内边距和边框包含在设定的高度/宽度内，不会破坏布局结构。

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