title: Flexbox child with "overflow: hidden" overflowing grandparent margins
body: <p>I'm trying to nest two child elements in a wrapper which specifies side margins so there's space between its contents and the sides of the screen when the display is narrow and a <code>max-width</code> for when the display is wide.</p>
  
  <p>The second child has some overflow which should be visible while the first child should stay strictly within the wrapper's content box. With the first child removed, the second child behaves as desired. When I add in the first child though, it seems to completely ignore the wrapper's margins, stretching the wrapper's content box and breaking the second child along with it.</p>
  
  <p>Applying <code>overflow: hidden</code> to the wrapper fixes the margin problem but clips the second child. Applying the margins to the first child didn't make it collapse with the parent since it's in a new block formatting context.</p>
  
  <p>The only workaround I've found so far would be to do:</p>
  
  <pre><code>.wrapper {
      &gt; * {
          margin-left: 1.5rem;
          margin-right: 1.5rem;
      }
  }
  </code></pre>
  
  <p>and increase the max-width of the wrapper by 3rem but I was hoping there was some solution that didn't require me to shift the margin from the wrapper to its children.</p>
  
  <p><a href="https://codepen.io/HybridCore/pen/jjoWmd" rel="noreferrer">https://codepen.io/HybridCore/pen/jjoWmd</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #000;
    color: #FFF;
    display: flex;
    justify-content: center;
  }
  
  .wrapper {
    margin: 0 1.5rem;
    max-width: 40rem;
    width: 100%;
  }
  
  .fit_content_box {
    display: flex;
    align-items: center;
  }
  
  .L {
    min-width: 0;
    flex: 1 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .R {
    margin-left: 1rem;
    height: 1rem;
    width: 1rem;
    background-color: #FFF;
  }
  
  .overflow {
    display: flex;
    justify-content: space-between;
  }
  
  .overflow&gt;div {
    width: 0;
    display: flex;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="fit_content_box"&gt;
        &lt;p class="L"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  
        &lt;div class="R"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="overflow"&gt;
        &lt;div&gt;
          &lt;p&gt;0&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;p&gt;12&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;p&gt;24&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>