1

flex is supposed to be a shorthand for flex-grow, flex-shrink, and flex-basis. But they don't seem to behave the same when there's no content in one of the items. Can anybody tell me why this is the case, and if there's a way to make the shorthand work? (I'm working in IE)

View fiddle example.

HTML

<div class="container">
  <div class="longhand red">
    <p>Some content</p>
  </div>
  <div class="longhand blue">
  </div>
</div>

<div class="container">
  <div class="shorthand red">
    <p>Some content</p>
  </div>
  <div class="shorthand blue">
  </div>
</div>

CSS

.container{
  display: flex;
}

.longhand{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.shorthand{
  flex: 1 1 0;
}

.red{
  background-color: red;
}

.blue{
  background-color: blue;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Charles_F
  • 186
  • 2
  • The problem in IE is that the `flex` property is parsed in a non-standard way. Using a unitless value for `flex-basis` messes the whole thing up. Try using `flex-basis: 0px` and `flex: 1 1 0px` ([demo](https://jsfiddle.net/xwLp6zvb/2/)). – Michael Benjamin Mar 29 '17 at 18:11

0 Answers0