How can I prevent flex items from shrinking in IE11 to be smaller than their content?

Question

Assuming the following markup: (JSFiddle link)

.parent {
  width: 200px;
  border: 1px solid #ccc;
  height: 300px;
  display: flex;
  flex-direction: column;
}
.space-avail-sets-height {
  overflow: auto;
}

<div class="parent">
  <div class="content-sets-height">
    <h3>This part should be as tall as it needs to be to fit the content.</h3>
  </div>
  <div class="space-avail-sets-height">This part should take whatever height is remaining, and then use scrolling to view the content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.</div>
  <div class="content-sets-height">This part should be as tall as it needs to be to fit the content.</div>
</div>

What can be done to make IE11 correctly display elements who's height depend on their content? (Not worried the overflowed section here) While every other browser does it correctly, our old friend IE coughs this up onto the page:

score 0 · Accepted Answer · edited Oct 21 '19 at 15:30

0

Add this to your code:

.parent > div:first-child,
.parent > div:last-child {
  flex-shrink: 0;
}

IE11, for whatever reason, needs flex-shrink disabled. (Probably because min-height: auto is the default setting on non-IE browsers, meaning that the items cannot shrink below the height of their content. But in IE11 the default may be min-height: 0. But then again, adding min-height: auto to IE11 doesn't solve the problem.)

edited Oct 21 '19 at 15:30

TylerH

20,799
66
75
101

answered Oct 21 '19 at 15:09

Michael Benjamin

346,931
104
581
701

probably the same about https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason/36828291#36828291 where MS says : *If omitted, the element's negative flexibility is "0"* which obviously is not for flex-shrink ;) – G-Cyrillus Oct 21 '19 at 15:26

How can I prevent flex items from shrinking in IE11 to be smaller than their content?

1 Answers1