IE11 flex child doesn't shrink to give room to other child with non-wrapping content

IE11 doesn't shrink a flex child when another child is too small to fit it's (non wrapping) content.

I have gone over the notorious IE flex bugs (https://github.com/philipwalton/flexbugs) and tried all solutions.

Fiddle

https://jsfiddle.net/adriaanmeuris/ef8Lz7ck/73/

.container {
  display: flex;
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  overflow: hidden;
  border: 1px solid red;
}

.center {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  border: 1px solid green;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  border: 1px solid blue;
}
<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

Expected behaviour (Chrome, FF, Safari, Edge):

expected behaviour

IE11 behaviour:

IE11 behaviour

1 answer

  • answered 2019-10-30 19:21 G-cyr running IE11

    flex-basis is set to 0 , remove it or set it to auto, else it follows the rule where it can let the element be 0 of width'sbasis.

    .container {
      display: flex;
    }
    
    .left {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0px;
      min-width: 0px;
      overflow: hidden;
      border: 1px solid red;
    }
    
    .center {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 200px;
      border: 1px solid green;
    }
    
    .right {
      flex-grow: 1;
      flex-shrink: 0;
      border: 1px solid blue;
    }
    <div class="container">
      <div class="left">
        left<br/> shrinks to 0
      </div>
      <div class="center">
        center<br/> fixed width, always centered (unless right column is too small to fit it's content)
      </div>
      <div class="right">
        right<br/> long_content_no_wrap_or_overflow
      </div>
    </div>