css - CSS：防止内容增加父级相对于另一个父级的宽度

Question

任何事情之前：我不想设置任何固定宽度（如 600 像素等）

注1：我不希望窗口的宽度被我拥有的户外数量修改注2：flex-direction设置为column，所以flex-basis对我不起作用，因为在这种情况下，flex-basis将处理高度，而不是宽度.

当容器的宽度设置为 100% 时，如何防止内容增加容器的宽度？我希望容器宽度由第二个容器确定，就像图像上一样：

这是我的代码：

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

    #outdoors {
        flex: 1 1 auto;
        overflow-x: auto;
        border: 2px solid #F60;
    }

    #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>```

标签： csswidthauto

Answer 1

Did you mean that?

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

    #outdoors {
        flex: 1 1 auto;
        overflow-x: auto;
        border: 2px solid #F60;
    }

    #windows {
      display:flex;
        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;
      flex-grow:inherit;
    }

<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>