How to position absolutely a div within a flex box without influencing the position of its siblings?
<p>I've got a <code>#text</code> inside a flex <code>#container</code> and want to absolutely position something underneath it :</p>

<p><strong>How could it not be taken in the calculation for the flex positioning of is siblings ?</strong> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;div id="text"&gt;
    "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."
  &lt;/div&gt;
  &lt;div id="absolute"&gt;
    Absolutly
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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

<ul>
<li><p>The node tree</p></li>
<li><p><strong>The already written flex properties</strong> (as <code>justify-content</code> in case of multiples <code>.text</code> elements)</p></li>
</ul>

<h2>Edit :</h2>

<p>I've found another question on this matter, tried the solution without results : <a href="https://stackoverflow.com/questions/29930933/absolute-positioned-item-in-a-flex-container-still-gets-considered-as-item-in-ie">Absolute positioned item in a flex container still gets considered as item in IE &amp; Firefox</a></p>

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

<h2>Final Edit :</h2>

<p>I pushed my research on the subject and found many questions <em>related</em> (duplicate) :</p>

<ul>
<li><p><a href="https://stackoverflow.com/questions/39069320/absolute-positioning-interfering-with-flexbox-positioning-in-firefox/39069462">Absolute positioning interfering with flexbox positioning in Firefox</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/32991051/why-is-an-absolutely-positioned-flex-item-not-being-ignored-by-justify-content">Absolutely positioned flex item not being removed from normal flow in Firefox</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/32532377/flexbox-in-firefox-items-are-not-lined-up-properly?noredirect=1&amp;lq=1">Flexbox in Firefox: Items are not lined up properly</a></p></li>
<li><p><strong>Answer</strong> by @Oriol <a href="https://stackoverflow.com/questions/36006173/exclude-element-with-fixed-positioning-from-justify-content-in-flex-layout/36102124#36102124">Exclude element with fixed positioning from justify-content in flex layout</a></p></li>
</ul>

<p>And a direct link to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=874718" rel="noreferrer">Bugzilla</a>.</p>