防止带有进度条的 flexbox 增长答案

【问题标题】：Prevent flexbox with progressbar from growing防止带有进度条的 flexbox 增长
【发布时间】：2016-09-30 14:24:09
【问题描述】：

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap progress-bar flexbox

【解决方案1】：

您可以使用 flex: 1 代替 flex: 1 0 auto，即在 firefox 上使用 flex: 1 1 0 或在 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>

【讨论】：

我玩了一个小时的所有flex-{grow,shrink,basis}: 属性，但没有找到...

【解决方案2】：

.main > div {
    flex: 1 0 50%;
}

会成功的

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

<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 Test Test Test Test Test Test Test </p>
  </div>
  <div style="background: #00F;">TEST2</div>
</div>

【讨论】：