CSS：flex纵向布局下如何避免子元素撑宽父容器且不设置固定宽度

解决方案 #

你只需要给#outdoors新增两条CSS规则即可满足需求，不需要设置任何固定宽度：

#outdoors {
  /* 原有规则保留 */
  width: 0;
  min-width: 100%;
}

实现原理

1. 你使用的inline-flex列布局默认会将容器宽度适配为所有子元素的最大宽度，给#outdoors设置width: 0后，它的原始宽度不再参与父容器宽度的计算，父容器宽度会完全由#windows的内容宽度决定。
2. 再设置min-width: 100%可以让#outdoors强制填充满父容器的可用宽度，配合你原本写的overflow-x: auto，内部内容超出宽度时就会自动出现横向滚动条，不会撑大父容器。

完整可运行代码

<style>
#desktop {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #F00;
}

#outdoors {
    flex: 1 1 auto;
    overflow-x: auto;
    border: 2px solid #F60;
    /* 新增规则 */
    width: 0;
    min-width: 100%;
}

#windows {
    flex: 1 1 100%;
    border: 2px solid #0A0;
}

.outdoor {
    display: inline-block;
    font-size: 50px;
    border: 2px solid #00A;
    margin: 10px;
}

.window {
    font-size: 100px;
    border: 2px solid #000;
    display: inline-block;
    margin: 10px;
}
</style>

<div id="desktop">
    <div id="outdoors">
        <div class="outdoor">1</div>
        <div class="outdoor">12</div>
        <div class="outdoor">123</div>
        <div class="outdoor">123</div>
        <div class="outdoor">123</div>
        <div class="outdoor">123</div>
    </div>
    <div id="windows">
        <div class="window">1</div>
        <div class="window">12</div>
        <div class="window">123</div>
    </div>
</div>

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