brunodd brunodd - 4 months ago 11
CSS Question

Dynamic width with table-cell

I am trying to make the width of

div.widget__stars
dynamic using
min-width
property . However the
min-width
property is ignored when I use
display: table-cell;
.

I've already tried
display: inline-block;
but it didn't work.

The red bar (
div.widget__bar
) can't have a fixed width either.

Here is my example:

<div class="container">
<div class="widget-row">
<div class="widget widget__stars">5 stars</div>
<div class="widget widget__bar"></div>
<div class="widget widget__percent">70%</div>
</div>
</div>


css:

.container,
.widget-row {
width: 100%;
}

.widget-row {
display: table;
}
.widget {
display: table-cell;
vertical-align: middle;
}

.widget__bar {
background: tomato;
}

.widget__stars {
width: 48px;
padding-right: 5px;
font-weight: bold;
}

.widget__percent {
width: 50px;
padding-left: 5px;
}


jsFiddle

If you set the width of
.widget__stars
to
min-width: 48px;
the red bar disappears.

Any ideas on how to fix this?

Answer

Flexbox can do that.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
.widget-row {
  display: flex;
  margin-bottom: 1em;
}
.widget {} .widget__bar {
  background: tomato;
  flex: 1
}
.widget__stars {
  padding-right: 5px;
  font-weight: bold;
}
.widget__percent {
  width: 50px;
  padding-left: 5px;
}
<div class="widget-row">
  <div class="widget widget__stars">Lorem ipsum dolor sit amet.</div>
  <div class="widget widget__bar"></div>
  <div class="widget widget__percent">70%</div>
</div>


<div class="widget-row">
  <div class="widget widget__stars">5 Stars</div>
  <div class="widget widget__bar"></div>
  <div class="widget widget__percent">70%</div>
</div>