Flexbox布局中内容容器阻碍兄弟容器高度自适应问题

你的问题核心是没正确利用Flexbox的空间分配机制，用固定高度导致容器无法正常收缩。以下是修复方案：

问题原因 #

你给.view设置了height: 100%，这会让它优先占据父容器的全部高度，而Flexbox默认情况下，子项内容超出时不会主动收缩，导致底部.input无法正常扩展，顶部.view也不会被压缩。

修复代码 #

修改.view的CSS属性，去掉固定高度，改用Flexbox空间分配属性并添加溢出处理：

.wrapper {
    padding: 20px 40px 40px 40px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
}

.view {
    /* 移除固定高度，用flex分配剩余空间 */
    flex: 1 1 auto;
    /* 内容过多时显示垂直滚动条 */
    overflow-y: auto;
    border: 1px solid blue;
    color: white;
}

.box{
    display: flex;
    flex-flow: column;
    height: 100%;
    border: 1px solid red;
}

.input{
    height: 400px;
    border: 1px solid green;
}

关键属性说明 #

• flex: 1 1 auto：这是flex-grow:1、flex-shrink:1、flex-basis:auto的简写：
  • flex-grow:1：让.view占据容器内所有剩余可用空间
  • flex-shrink:1：允许容器空间不足时，.view自动收缩
  • flex-basis:auto：基于内容自动计算初始高度
• overflow-y: auto：当.view内内容超出容器高度时，自动显示垂直滚动条，避免内容溢出破坏布局

修改后，无论.input设置多高，.view都会自动适配剩余空间，内容过多时也能通过滚动查看，不会影响整体布局。

内容的提问来源于stack exchange，提问作者dante-e