Css chrome flexbox渲染会导致内容过快溢出

我使用flexbox来封装未知和可变大小的内容。 在下面的示例中，一个父对象中有两个并排的子框

在Firefox（LinuxMint上为26.0）中，我可以手动缩小视口宽度，而不会出现水平溢出。它确实给了内容较少的框太宽了一点，但它不是一个交易破坏者

然而，在Chrome（LinuxMint上的Chromium31）中，两个子框（“我的css中的胶囊”）的弯曲情况更糟，并且使视口变窄会导致右侧面板中的水平溢出

我已经搜索过了，我认为这里没有相关的问题

也许这不是Chrome的一个bug，但只是不同的渲染算法，而且，考虑到其他内容，Chrome的性能会超过Firefox

无论哪种方式，我是否可以在css中添加一些东西，使新浏览器的行为更加一致

我相信下面是一个最低限度的工作示例

jsfiddle：

html:

---

您使用Flexbox有什么特别的原因吗？如果改用table display属性，您将在Chrome中获得所需的行为：@cimmanon在您的jsfiddle示例中，

height:100%导致页面垂直过大<代码>框大小：边框框在Chrome中修复了此问题，但在FF中没有。但是，在Chrome而不是FF中，内部盒子（胶囊）的边界延伸到容器的边界以下（不是在JSFIDLE中，而是在Chrome单机版中）。煎锅烧我认为。似乎是正常工作，没有溢出为我在铬32
<div id="container">

    <div class="capsule">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
    </div>

    <div class="capsule">
      Lorem ipsum dolor sit amet, consectetur.
    </div>

</div>

div#container {
  position: absolute;
  top: 0px; bottom: 0px; left: 0px; right: 0px;
  display: flex;
  justify-content: center;
  align-items: stretch; 
  flex-direction: row;
  border: solid 2px black;
  border-radius: 6px;
  margin: 2px; }

div.capsule {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1; 

  border: solid 2px red;
  border-radius: 6px;
  margin: 2px; }