Flexbox ios Raumverteilung gibt

Question

Werfen Sie einen Blick auf dieses Bild:

Wie Sie die 2 Endglieder des Ankerbehälter ausbrechen sehen.

Dies geschieht nur auf einem iPad (mit dem Simulator zu testen).

Auf dem Desktop verhält es sich wie es sollte, indem es die Wörter in den anderen Verbindungen unterbricht, die mehr Raum zur Verfügung stellen, um die restlichen Einzelteile zu verteilen.

Es ist, als ob ios nicht weiß, wie man den Text in der ersten Verbindung richtig bricht.

.nav-section { 
 
    padding: 0 30px; 
 
} 
 
.nav-section__list { 
 
    display: inline-flex; 
 
    align-items: stretch; 
 
    margin: 0 auto; 
 
} 
 
.nav-section__item { 
 
    padding: 0 20px; 
 
} 
 

 
.nav-section__link { 
 
    display: block; 
 
    background: red; 
 
}

<nav class="nav-section"> 
 
    <div class="nav-section__list"> 
 

 
    <div class="nav-section__item"> 
 
     <a href="#" class="nav-section__link">AAAAA AAAA-AAAAAAAA AAAAAAAAA</a> 
 
    </div> 
 

 
    <div class="nav-section__item"> 
 
     <a href="#" class="nav-section__link">AAA AAAAAAAA AAAAAAAAAA</a> 
 
    </div> 
 

 
    <div class="nav-section__item"> 
 
     <a href="#" class="nav-section__link">AAAAAAAAAAA</a> 
 
    </div> 
 

 
    <div class="nav-section__item"> 
 
     <a href="#" class="nav-section__link">AAAAAAA</a> 
 
    </div> 
 

 
    </div> 
 
</nav>

aktualisieren

• word-break: break-all ist keine gültige Lösung:

• word-wrap: break-all funktioniert auch nicht:

Dies ist die gleiche Auflösung, aber auf einem Desktop:

Wie Sie die Art und Weise sehen die Worte brechen ist ganz anders. Das iPad möchte einfach nicht kooperieren.

Update 2

Ich habe in einem anderen Fall von Flexbox in das gleiche Problem laufen. Es scheint, als hätte IOS immer noch einige Fehler bei der Implementierung.

Also ging ich voran und verwendete display: table; und Anzeige: table-cell; nur, bis das Problem gelöst ist.

Wenn jemand andere Hinweise hat, warum genau das Problem passieren könnte, wäre das großartig. Vielen Dank!

Answer 1

Flexbox ist relativ neu, und die Browser haben es vielleicht ein wenig anders implementiert. Möglicherweise fehlt Ihnen das Präfix -webkit-, da es aussieht, als hätte Safari es in einigen Versionen benötigt.

display: -webkit-inline-flex; 
display: inline-flex; 
-webkit-align-items: stretch; 
align-items: stretch; 

Oder vielleicht könnten Sie verwenden versuchen:

word-break: break-all; 

Um sicherzustellen, dass diese Worte gebrochen werden, und nicht überläuft.

Answer 2

Muss angeben Breite in nav-section__item

.nav-section__item { 
    padding: 0 20px; 
    word-wrap: break-all; 
    width: 20%; 
} 

Live-Demo

Answer 3

Nach meiner Erfahrung mit Safari und Flexbox es hilft oft nur

display: flex; 
flex-shrink: 0; 

an den Behälter hinzuzufügen, die zu klein ist. Das sollte garantieren, dass der Container mindestens so groß ist wie sein enthaltenes Element.