html - 防止带有进度条的 flexbox 增长

Question

我有一个带栏的页面设计，它可以有一个、两个或三个栏。这些列的大小应相同。

为此我使用了 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>

列应该有相同的大小
我怎样才能使列不受内容宽度的影响？

Answer 1

你可以使用 flex: 1 而不是 flex: 1 0 auto 也就是 flex: 1 1 0 在 firefox 或 flex: 1 1 0% 在 chrome 上。

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