Come posizionare assolutamente un div all'interno di un flex box senza influenzare la posizione dei suoi fratelli? [duplicato] - html, css, css3, flexbox, css-position

Io ho un #text all'interno di un flex #container e voglio posizionare assolutamente qualcosa al di sotto di esso:

Come non potrebbe essere preso nel calcolo per il posizionamento flessibile dei fratelli?

#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>

Come noterai il #text è leggermente rialzato al centro di è genitore e mi piacerebbe perfettamente centrato verticalmente se possibile senza modificare:

• L'albero dei nodi

• Le proprietà flex già scritte (come justify-content in caso di multipli .text elementi)

Modificare :

Ho trovato un'altra domanda al riguardo, ho provato la soluzione senza risultati: L'elemento posizionato in modo assoluto in un contenitore flessibile viene comunque considerato come elemento in IE e Firefox

Sembra essere relativo un bug di Firefox e IE (Sto attualmente eseguendo Firefox 47, funziona su Chromium.)

Modifica finale:

Ho spinto la mia ricerca sull'argomento e ho trovato molte domande relazionato (duplicare) :

• Posizionamento assoluto che interferisce con il posizionamento della flexbox in Firefox

• Elemento flex assolutamente posizionato non rimosso dal flusso normale in Firefox

• Flexbox in Firefox: gli articoli non sono allineati correttamente

• Risposta da @Oriol Escludi elementi con posizionamento fisso da giustificare-contenuto nel layout flessibile

E un link diretto a Bugzilla.

risposte:

Come hai scoperto, un elemento flessibile in posizione assoluta è un fattore in cui entrare justify-content calcoli in alcuni browser, nonostante debba essere rimosso dal flusso normale.

Come definito nella specifica:

4.1. Flex assolutamente posizionato Bambini

Poiché è fuori flusso, un bambino assolutamente posizionato di un flex il contenitore non partecipa al layout flessibile.

In Firefox e IE11, tuttavia, gli elementi flessibili posizionati in modo assoluto agiscono come fratelli normali in termini di allineamento con justify-content.

Ecco un esempio: funziona negli attuali Chrome, Safari e Edge, ma non riesce in Firefox e 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>

versione jsFiddle

Sebbene tu sia a conoscenza delle soluzioni alternative pubblicate in altre risposte, ti suggerirò un approccio alternativo nel caso in cui ti trovi in ​​un Problema XY.

La mia comprensione è che si desidera allineare in basso un articolo flessibile, ma disporre di un altro elemento centrato verticalmente nel contenitore. Bene, non hai necessariamente bisogno di un posizionamento assoluto per questo.

Puoi usare uno pseudoelemento invisibile che funge da terzo elemento flessibile. Questo oggetto servirà da contrappeso all'elemento DOM allineato in basso e manterrà centrato l'oggetto centrale.

Ecco i dettagli:

• Elementi flettenti centrali e allineati in basso
• Metodi per allineare gli oggetti Flex (vedi riquadri 62 e 66)

#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>

Cambia il valore di justify-content al centro. Spero che funzioni ora.