justify content flex-end not working for IE

Question

Flex-end working for chrome and firefox, but not working for ie, go through following code

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

@SarabjitSingh try this https://stackoverflow.com/questions/32885534/how-to-make-flex-end-work-in-ie11 hope this will work for you. — Nitin Garg, Mar 08 '19 at 08:49
@NitinGarg check condition in my case here is height 100px, check this code in chrome and IE11 thna you understand difference — Sarabjit Singh, Mar 08 '19 at 08:55
Please only add relevant tags to questions when suggesting an edit. Additionally, you should improve the question to the extent possible, not _just_ adding a tag. Comments are intended to describe _what_ action you performed and _why_; they should not be a single copy-pasted line of text that could not be less helpful in determining _why_ you made the edit (also, it's misspelled). — jhpratt, Mar 28 '19 at 05:55

score 7 · Accepted Answer · edited Mar 11 '19 at 21:16

IE seems to align items differently using justify-content when there is an overflow. it doesn't only happen with flex-end, you will face the same using center. Any value that will create a top overflow will not work as expected.

It will also happen in a row direction. Any property that will create a left overflow will not work.

Examples where the alignment is doing nothing:

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span></span>
</div> 

<div class="container" style="justify-content:center;">
  <span></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span></span>
</div>

I am surprised to say this, but it seems that IE is doing a good thing in those cases because it's preventing the unwanted overflow which may create issues like described in this question Centered flex-container grows beyond top and also this one Can't scroll to top of flex item that is overflowing container

Considering this, it's difficult to say if it's a bug. It's a probably by design and the IE team made the decision to avoid the bad overflow. ¹

This said, here is a hack using some negative margin that will allow you to have the needed behavior on IE:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
  flex-direction: column;
  flex-flow: column;
  justify-content: flex-end;
  height: 100px
}
.flex-container > div:first-child {
  margin-top:-100vh; /*put a very big margin here*/
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Same hack applied to the previous examples:

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span style="margin-left:-100%;"></span>
</div> 

<div class="container" style="justify-content:center;">
  <span style="margin: 0 -100%;"></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span style="margin-top:-100%;"></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span style="margin:-100% 0;"></span>
</div>

^{1: I don't have any official proof at the time being.}

no buddy, margin is not a solution, if it is in case of flex-flow: row than what — Sarabjit Singh, Mar 11 '19 at 12:40
@SarabjitSingh as I described, IE is behaving like that so you will need some hack to achieve what you want .. in case of a row direction we can do another hack, share your code for that case — Temani Afif, Mar 11 '19 at 12:46
Great, it's working almost in every column condition..Thanks! — Sarabjit Singh, Mar 12 '19 at 04:11

score 2 · Answer 2 · answered Mar 11 '19 at 08:30

You could refer to the following code, it seems that the flex-end works well on my side:

<style>
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        background-color: DodgerBlue;
        height: 100%;
        flex-direction: column;
        flex-flow: column;
    }
        .flex-container > div:nth-child(2n+0) {
            background-color: aquamarine;
            width: 300px;
            height: 30px
        }
        .flex-container > div:nth-child(2n+1) {
            background-color:antiquewhite;
            width: 300px;
            height: 30px
        }
</style>
<h1>Flexible Boxes</h1>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

The result as below:

The result like [this](https://i.stack.imgur.com/1VXna.png). Do you mean if the height property is small enough, it will over the container? Might you could try to remove the flex-direction and flex-flow properties. Then the result like [this](https://i.stack.imgur.com/FRkd7.png). — Zhi Lv, Mar 11 '19 at 08:44
my above code working for chrome and firefox that i want, check it in chrome and IE11, so you understant proble — Sarabjit Singh, Mar 11 '19 at 08:48

score 0 · Answer 3 · answered Mar 08 '19 at 08:32

Try adding more display support:

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

.flex-container {  
  /* Add more browser support */
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;

  /* Combined flex-wrap and flex-direction */
  flex-flow: nowrap column;

  /* Add more browser support */
  justify-content: flex-end;
  -webkit-justify-content: flex-end;

  /* This could potentially help with IE10+11 */
  -ms-flex-pack: end;
  justify-content: space-between;  


  height:100px

  background-color: DodgerBlue; 
  height:100px
}

http://the-echoplex.net/flexyboxes/ Gives quite a few tips.

in case of height is less than content than there is issue in IE11 — Sarabjit Singh, Mar 11 '19 at 05:05

score 0 · Answer 4 · answered Mar 08 '19 at 08:40

just try to use

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

in your class like this

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

hope this will help you...

score 0 · Answer 5 · answered Mar 11 '19 at 21:38

Flex and IE is a common problem. Most of the times this is related to the parent of the flex element. The parent is missing in the question, but you should do something like this:

HTML

<div class"flex-wrapper">
    <div class="flex-container">...</div>
</div>

CSS

.flex-wrapper { width: 100%; }

What is important is that you use % and do not use the px unit.

justify content flex-end not working for IE

5 Answers5

Linked