Cyrbil Cyrbil - 6 months ago 29
CSS Question

Prevent flexbox with progressbar from growing

I have a page design with columns, it can have one, two or three columns.
Theses columns should have the same size.

For that I use flexbox, it is nice and allows me to add/remove my columns and let the browser handle the resizing of the columns' width.

Now I hit an issue when a text inside a column is larger that the column's width. The column grow and that break the uniformity of the design...

I built an 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>





The columns should have the same size

How can I make so that the column don't get affected by the content width ?

Answer

Instead of flex: 1 0 auto you can use flex: 1 and that is flex: 1 1 0 on firefox or flex: 1 1 0% on 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>

Comments