Question

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

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

然而，在Chrome（Linux Mint上的Chromium 31）中，两个子盒（我的css中的胶囊）的弯曲情况更糟，并且使视口变窄会导致右侧水平溢出面板早就应该了。

我已经搜索过了，我认为这里不存在相关问题https://code.google.com/p/chromium/issues。

也许它不是Chrome中的一个错误，但它只是不同的渲染算法，而且鉴于其他内容，Chrome会胜过Firefox。

无论哪种方式，我可以添加到我的CSS中以使新浏览器的行为更加一致吗？

我认为以下是最低限度的工作示例。

的jsfiddle： http://jsfiddle.net/AlanQ/668GL/

HTML：

<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>

的CSS：

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; }

chrome flexbox渲染导致内容过早溢出

0 个答案: