Skip to content

Nowrap not working no IE10 & IE9 #94

@crtlf

Description

@crtlf

First of all, thank you for Flexibility, awesome work !

I have an issue with nowrap. Here's how it works in Chrome or others modern browsers.

My list of items :
capture d ecran 2017-11-09 a 10 27 13

But if the items are wider than the container itself, they stretch to the container width.
capture d ecran 2017-11-09 a 10 26 52

But on IE10 & IE9, it goes out of the container.
capture d ecran 2017-11-09 a 10 32 10

Here's my CSS

ul {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 20px 0;
}

ul li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

And it's worse if I give a width: 100% to my ul
capture d ecran 2017-11-09 a 10 31 35

Am I missing something ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions