Flexbox IE 11 shrink issue

Won’t fix Issue #8600549

Details

Author
Kirill N.
Created
Aug 23, 2016
Privacy
This issue is public.
Found in
  • Internet Explorer
Found in build #
11
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Following example works fine in chrome, firefox and edge, but in IE 11 div with class “second” overflows parent. According to specification it should be shrinked.

http://codepen.io/anon/pen/kXmoYY

html:

<div class="first">
  <div class="second">
    <div class="third">
        1
    </div>
    <div class="third">
        2
    </div>
  </div>
  <div class="second">
    <div class="third">
        3 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    <div class="third">
        4 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
  </div>
</div>

less:

.first{
  display: flex;
  flex-direction: row;  
  width: 500px;

  .second{     
    flex: 0 1 auto;   
    display: flex;
    flex-direction: column;       

    .third {     
      flex: 1 1 auto; 
      padding: 10px;
    }
  }
}

See screenshot in attachment.

Attachments

1 attachment

Comments and activity

You need to sign in to your Microsoft account to add a comment.

Sign in