Flex布局下侧边、底部div隐藏时中间div自适应缩放最佳方案

底部栏隐藏后canvas无法自适应，是垂直方向flex链的伸缩属性配置缺失导致的：

• 包裹中间内容区的.outer-col未设置伸缩属性，无法自动占满顶部导航栏下方的全部垂直空间
• 包裹canvas和底部栏的.inner-row未设置为纵向flex容器，内部元素无法按垂直方向分配空间
• canvas写死了min-height: 70vh的固定最小高度，且未设置伸缩属性，无法在底部栏隐藏时自动撑满空缺
• 底部栏用固定height属性，未适配flex布局的空间分配规则

不需要调整HTML结构，仅修改对应CSS规则即可：

1. 给.outer-col添加flex: 1，让它占满ribbon下方的所有剩余垂直高度，同时保持纵向flex布局
2. 给.inner-row添加display: flex和flex-direction: column，将其设为canvas和底部栏的纵向flex父容器
3. 移除canvas的固定min-height，替换为flex: 1，让它自动填充父容器的剩余空间
4. 将底部栏的固定height替换为flex: 0 0 20vh，保证显示时固定占20vh高度，隐藏时完全释放占用空间

修正后的完整CSS代码如下：

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

body {
    display: flex;
    flex-direction: column;
}

.ribbon {
    background: beige;
    height: 10vh;
}

.outer-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.inner-col {
    display: flex;
    flex-direction: row;
    flex: 1 1 0;
}

.inner-row {
    flex: 6;
    display: flex;
    flex-direction: column;
}

.canvas {
    background: skyblue;
    flex: 1;
}

.left {
    /* display: none; */
    background: beige;
    flex: 1;
}

.right {
    /* display: none; */
    background: beige;
    flex: 1;
}

.bottom {
    /* display: none; */
    background: beige;
    flex: 0 0 20vh;
}

.ribbon, .bottom, .canvas, .left, .right {
    border-style: solid;
    box-sizing: border-box;
}

修改完成后，任意给左栏、右栏、底部栏设置display: none，canvas都会自动缩放填充全部剩余页面空间，不会出现留白或溢出。

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