flexbox，当孩子将flex-shrink缩小为0时，孩子溢出父对象

Question

我在使用flex-box时遇到问题。我在下面发布了我的代码。

我在“文章”上使用“ flex-shrink：0”，因为没有它，我的子文章就无法获得良好的高度。但是问题在于，我的第一篇文章溢出了“内容”。难以解释，我创建了一个jsfiddle来显示： https://jsfiddle.net/Lmkh8f72/4/

就像您看到的那样，在结果页面上，没有显示两个first子文章。

如果有人可以帮助我，谢谢：）

html

null

css

<div class="menu">
  header
</div>
<div class="main">
  <div class="content">
    <div class="article"> 
      <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
    </div>
    <div class="article">
    <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
      <div class="subarticle">
      </div>
    </div>   
  </div>
</div>