Flexbox: span mit einem Link bricht in zwei Zeile

Question

Das Problem ist, dass die Spannweite, wo innen gibt es a link, bricht auf zwei Zeilen. Dies ist der Code:

<div id="formvox"> 
    <span> 
    <span id="momentaneo"><i aria-hidden="true" class="fa fa-cog fa-spin fa-3x fa-fw"></i> Caricamento in corso...</span> 
    <span id="force">Prova ad attendere qualche minuto altrimenti <a href="#">iscriviti di nuovo</a></span> 
    </span> 
</div> 

Und das CSS:

#formvox {  
    display: flex; 
    flex-direction: column; 
    height: auto; 
    justify-content: center;  
} 


#momentaneo { 
    align-items: center; 
    display: flex; 
    height: 100%; 
    justify-content: center; 
    width: 100%; 
} 


#force { 
    display: flex;  
    justify-content: center;  
} 

Dies ist jsfiddle: https://jsfiddle.net/ek7z718n/

Ich verstehe nicht, warum, wenn Breite des Fensters ist sehr klein, die Spanne #force bricht in zwei Zeilen. Vielleicht ist das Problem a? Ich habe versucht, es zu lösen, aber nichts ...

Answer 1

Das Problem ist display:flex; auf der #force span.

Dies tritt auf, weil die Spanne versucht, alle Kinder auf eine Zeile zu passen, weshalb das a nicht zur nächsten Zeile geht.

Answer 2

es auf in der nächsten Zeile gezwungen ist, weil Sie Breite von 100% für #momentaneo haben, so dass es, wenn die vollen Eltern Breiten und dann das andere Element in der nächsten Zeile gezwungen nimmt

Sie Breite ändern könnte: 100% bis max-width: 100%