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

Question

I've got a #text inside a flex #container and want to absolutely position something underneath it :

How could it not be taken in the calculation for the flex positioning of is siblings ?

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

As you'll notice the #text is slightly upside the center of is parent and I would like it perfectly vertically centered if possible without modifying :

• The node tree

• The already written flex properties (as justify-content in case of multiples .text elements)

Edit :

I've found another question on this matter, tried the solution without results : Absolute positioned item in a flex container still gets considered as item in IE & Firefox

It seems to be relative a Firefox and IE bug (I'm currently running Firefox 47, it works on Chromium.)

Final Edit :

I pushed my research on the subject and found many questions related (duplicate) :

• Absolute positioning interfering with flexbox positioning in Firefox

• Absolutely positioned flex item not being removed from normal flow in Firefox

• Flexbox in Firefox: Items are not lined up properly

• Answer by @Oriol Exclude element with fixed positioning from justify-content in flex layout

And a direct link to Bugzilla.

Cornel

The duplicate question solution, does not work for all circumstances. If you add one more div, it will not solve it. – Wearisome

Answer 1

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>

jsFiddle version

---

Although you're aware of the workarounds posted in other answers, I'll suggest an alternative approach in case you're caught in an XY problem.

My understanding is that you want to bottom-align one flex item, but have another item vertically centered in the container. Well, you don't necessarily need absolute positioning for this.

You can use an invisible pseudo-element that acts as a third flex item. This item will serve as a counterbalance to the bottom-aligned DOM element and keep the middle item centered.

Here are the details:

• Center and bottom-align flex items
• Methods for Aligning Flex Items (see boxes 62 & 66)

Irv

Absolute positioning inside flex container as of dec. 2019: codepen.io/ekadagami/pen/mdyPybq – Wentzel

Answer 2

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

Change the value of justify-content to center. Hope it works now.

Townswoman

Thanks a lot, I used this solution when I had only one text element. If you had another one they won't be disposed 'space-around` as expected. That was why I wrote : if possible without modifying : The node tree The already written flex properties Please don't make me yell again. – Cornel