title: CSS: Prevent content to increase parent's width relative to another parent
body: <p><strong>BEFORE ANYTHING: I dont want to set any fixed width (like 600px etc.)</strong></p>
  <p>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.</p>
  <p>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:<a href="https://i.stack.imgur.com/tppNv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tppNv.png" alt="enter image description here" /></a></p>
  <p>This is my code:</p>
  <pre><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;
      }
  &lt;/style&gt;
  
  &lt;div id=&quot;desktop&quot;&gt;
      &lt;div id=&quot;outdoors&quot;&gt;
          &lt;div class=&quot;outdoor&quot;&gt;1&lt;/div&gt;
          &lt;div class=&quot;outdoor&quot;&gt;12&lt;/div&gt;
          &lt;div class=&quot;outdoor&quot;&gt;123&lt;/div&gt;
          &lt;div class=&quot;outdoor&quot;&gt;123&lt;/div&gt;
          &lt;div class=&quot;outdoor&quot;&gt;123&lt;/div&gt;
          &lt;div class=&quot;outdoor&quot;&gt;123&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;windows&quot;&gt;
          &lt;div class=&quot;window&quot;&gt;1&lt;/div&gt;
          &lt;div class=&quot;window&quot;&gt;12&lt;/div&gt;
          &lt;div class=&quot;window&quot;&gt;123&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;```
  </code></pre>