CSS: Prevent content to increase parent's width relative to another parent

Question

BEFORE ANYTHING: I dont want to set any fixed width (like 600px etc.)

Note1: I dont want window's width be modified by the numbers of outdoors I have Note2: flex-direction is set to column, so flex-basis dont work for me, because in this case, flex-basis will deal with height, not width.

How do I prevent the content from increasing container's width when the container's width is set to 100%? I want the container width be determinated by the second container, like on the image:

This is my code:

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

I have updated the duplicate, the one you got was irrelevant — Temani Afif, Jun 08 '21 at 08:15

score 0 · Answer 1 · answered Jun 08 '21 at 05:16

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>

Hi, thanks for your answear. But I dont want the window size to be modified by the outdoors length. In your answear, the much outdoors I have, the more it will increase the windows width. =) — Wolfgang Amadeus, Jun 08 '21 at 05:53

CSS: Prevent content to increase parent's width relative to another parent

1 Answers1