html - 防止带有Progressbar的Flexbox增长

我有一个带有列的页面设计，它可以有一列、两列或三列。
这些列的大小应该相同。
对于我使用的flexbox，它很好，允许我添加/删除列，并允许浏览器处理列宽度的大小调整。
现在，当列中的文本大于列的宽度时，我遇到了一个问题。柱的生长破坏了设计的一致性。。。
我建了一个MCVE：

.main {
    display: flex;
}
.main > div {
    flex: 1 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="main">
  <div>
    <div class="progress">
      <div role="progressbar" style="width: 70%"
           aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
           class="progress-bar progress-bar-info progress-bar-striped active"></div>
    </div>
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test </p>
  </div>
  <div style="background: #00F;">TEST2</div>
</div>

列的大小应该相同
如何使列不受内容宽度的影响？

最佳答案

您可以在firefox上使用flex: 1 0 auto而不是flex: 1，也就是在chrome上使用flex: 1 1 0。

.main {
  display: flex;
}
.main > div {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="main">
  <div>
    <div class="progress">
      <div role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-info progress-bar-striped active"></div>
    </div>
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
  <div style="background: #00F;">TEST2</div>
</div>

关于html - 防止带有Progressbar的Flexbox增长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37564910/