Question

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

为此，我使用flexbox，这很好，允许我添加/删除我的列，让浏览器处理列宽度的大小调整。

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

我建立了一个MCVE：

select cust_id, 
campaign_date,
(case when campaign_date=Bet_Date_Placed_Key then amount1 else null end) as Amount1,
(case when campaign_date=Bet_Date_Placed_Key then amount2 else null end) as Amount2,
(case when campaign_date=Bet_Date_Placed_Key then amount3 else null end) as Amount3,

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

列应具有相同的尺寸
如何使列不受内容宽度的影响？

Answer 1

您可以在Firefox上使用flex: 1 0 auto而不是flex: 1而不是flex: 1 1 0或在Chrome上使用flex: 1 1 0%。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

会做的伎俩

＆＃13;

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

＆＃13;

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

＆＃13;

防止带有进度条的flexbox增长

2 个答案: