Absolute Positioned Item in a Flex Container Still Gets Considered as Item in Ie & Firefox

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

It turns out that all it takes is three simple steps

(Demo)

1). Set the left and right margin to auto on each child

img {
    margin-left: auto;
    margin-right: auto;
}

2). Set the left margin on the first child to 0

img:nth-child(2) {
    margin-left: 0;
}

3). Set the right margin on the last child to 0

img:last-child {
    margin-right: 0;
}

If you miss any of these steps it will not work properly

This works in firefox and chrome, I haven't tested it in any other browsers.

EDIT:

Thanks to @Pontiacks

Apparently you can get away with adding margin-left: auto to the img:nth-child(2)

updated jsfiddle

Absolutely positioned flex item is not removed from the normal flow in IE11

It is happening because justify-content: space-between; Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div> between <div class="c1">Content 1</div> and <div class="c2">Content 2</div>
like this

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

How to position absolutely a div within a flex box without influencing the position of its siblings?

As you've discovered, an absolutely-positioned flex item factors into justify-content calculations in some browsers despite the fact it should be removed from the normal flow.

As defined in the spec:

4.1. Absolutely-Positioned Flex
Children

As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.

In Firefox and IE11, however, absolutely-positioned flex items act like normal siblings in terms of alignment with justify-content.

Here's an example. It works in current Chrome, Safari and Edge, but fails in Firefox and IE11.

flex-container {  display: flex;  justify-content: space-between;  position: relative;  background-color: skyblue;  height: 100px;}flex-item {  background: lightgreen;  width: 100px;}[abspos] {  position: absolute;  z-index: -1;}

<flex-container>  <flex-item>item 1</flex-item>  <flex-item>item 2</flex-item>  <flex-item abspos>item 3</flex-item></flex-container>

Flexbox with table and absolute positioning not working in IE 10, 11 or Edge

The solution was to force the table and the cells to have a height of 100%.

This then fixed the relative issue in IE within flexbox

<div style="display: flex">  <div style="flex:1">  <table style="width:100%; height: 100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td>    <td style="vertical-align:top; position: relative; height: 100%">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr>      </table></div></div>

Flex item not centering in IE

The Problem

Absolutely-positioned children of a flex container are taken out of the normal flow of the document.

In fact, they are not even flex items, because they don't accept flex properties.

from the spec:

§ 4.1. Absolutely-positioned Flex Children

As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.

Here is why your layout works anyway in Chrome, Firefox and Edge:

continuing with the spec:

The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. For this purpose, auto margins are treated as zero.

read more >>

However, IE11 provides only partial support for the current flexbox specification, which may explain the rendering difference.

Solution

Since your content item isn't doing anything flex-related, just use a standard, non-flex method for horizontal and vertical centering.

body {  height: 100vh;  position: relative;}
.content {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 400px;  height: 200px;  background-color: #333333;}

<div class="content">

Flexbox and Position Absolute Without Top/Bottom in Chome vs. FF & IE

Yes, this is a difference in layout between Blink and WebKit.

I think the current recommendation would be to either specify the top and left, or use something that has better behavior.

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
Absolutely positioned children should not participate in the flex box layout model.
They should be treated as the starting item in the element.

Edit: They may need to update their test cases - they need to separate Blink and WebKit, and they need this particular overlap test.

100% width absolutely positioned flexbox not constrained by CSS Grid in IE

From the grid spec:

An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

Therefore, grid properties on .ele:first-child, which is an absolutely-positioned child of a grid container, should be ignored. That's why the element is not constrained by grid-column in IE.

Of course, spec guidelines are just that: guidelines. So rendering may vary between browsers. I suspect that's why you're seeing the difference between Chrome, Safari and Firefox and IE.

Take flex item out of flow - IE11

You can do this with only margin without the need of position:absolute

.flex {  display: flex;  width: 250px;  border: 1px solid black;  padding: 5px;  margin: 30px auto;}
.flex div:nth-last-child(3) {  margin-left: -35px;  margin-right:10px;}
.flex div:last-child {   margin-left:auto;}

<div class="flex">  <div>Item 1</div>  <div>Item 2</div></div>
<div class="flex">  <div>Absolute</div>  <div>Item 1</div>  <div>Item 2</div></div>

---

Related Topics