CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
Atanas Abrashev
Atanas Abrashev

Reputation: 103

flex item width problem with display: inline-flex in IE11

Here is a simple illustration of the problem:

.parent {
  width: 150px;
}

.container {
  display: inline-flex;
  height: 350px;
  background: blue;
}

.photo {
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}
<div class="parent">
  <div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>

http://jsfiddle.net/fxyne157/

In Chrome and Firefox, the width of fixed-width divs inside a container div with display: inline-flex is not bound by the width of the parent of the container, which is what one would expect with inline-flex.

In Internet Explorer 11 however the width of the fixed-width divs is a percentage of the parent width of the flex container.

What it looks like on IE 11, even with inline-flex:

enter image description here

Any ideas whether or not this is a known bug, or if I am missing something obvious? How can I make the .container expand to as much space it needs so that all .photo divs are 150px regardless of the width of the .parent container?

Thanks!

Upvotes: 2

Views: 5885

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371251

On the .parent element, instead of width: 150px use min-width: 150px.

On the .photo items, add flex-shrink: 0, which will disable the default setting of flex-shrink: 1.

IE11 is full of flexbugs.

.parent {
  min-width: 150px; /* adjustment */
}

.container {
  display: inline-flex;
  height: 350px;
  background: blue;
}

.photo {
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
  flex-shrink: 0;  /* adjustment */
}
<div class="parent">
  <div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>

Upvotes: 1

Related Questions