防止带有进度条的 flexbox 增长

Question

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

为此我使用了 flexbox，它很好，允许我 add/remove 我的列并让浏览器处理列宽的大小调整。

现在，当列中的文本大于列的宽度时，我遇到了一个问题。柱子变大，打破了设计的统一性...

我构建了一个 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，即在 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>

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

防止带有进度条的 flexbox 增长

Prevent flexbox with progressbar from growing

html

css

flexbox

twitter-bootstrap

progress-bar