title: Flex box shrink is not working where wrap a child, I just want box2 be 200px instead of 300px
body: <p>When i use flex box and flex shrink, I wrap a child into a div, It does not work as i want.</p>
  <h2>I want box 2 be 200px instead of 300px.
  And why shrink is not working inside.</h2>
  <hr />
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;style&gt;
      #content {
        display: flex;
        width: 300px;
        background: blue;
      }
      
      #content div {}
      
      .box {
        flex-shrink: 0;
        width: 100px;
      }
      
      .box1 {
        flex-shrink: 1;
        display: flex;
      }
      
      .box2 {
        flex-shrink: 1;
        width: 300px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="content"&gt;
      &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
      &lt;div class="box1" style="background-color:blue;"&gt;
        &lt;div class="box2" style="background-color:green;"&gt;B&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can anyone help me?</p>