webentwicklung-frage-antwort-db.com.de

Überlappende CSS-Flexbox-Elemente in Safari

Was ist das richtige CSS, um Safari zu zwingen, Flex-Elemente in einem Standard-Flex-Container nicht zu überlappen?

Safari scheint zu viel Breite zu geben, um Artikel mit viel Inhalt zu biegen.

Safari: (v8.0.8 unter Mac OS X 10.10.5 Yosemite)
 flex-items-safari.png

Die Flex-Artikel werden in Chrome und Firefox gut angezeigt.

Chrom:
 enter image description here


CSS:

main {
   display: flex;
   border: 3px solid silver;
   }
main >div {
   background-color: Plum;
   margin: 10px;
   }


HTML:

<main>
   <div>
      Doh!!!!!!!!!!!
   </div>
   <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua. Ut enim ad minim veniam.
   </div>
</main>

Geige mit dem Code:
http://jsfiddle.net/LL05grus/6

htmlcsssafariflexbox
27
Dem Pilafian

Das Element schrumpft. Sie müssen die flex-shrink-Eigenschaft des schrumpfenden Elements auf 0 setzen.

main >div:first-child {
  -webkit-flex: 0;
  flex-shrink: 0;
}
41
Underfrog

Ich hatte auch ein ähnliches Problem, bei dem die Richtung der Flexbox auf überlappte Elemente auf dem iPad geändert wurde. Das Problem betraf die flex: 0 1 0;-Eigenschaft, die auf das untergeordnete Element angewendet wurde. Geben Sie den Basiswert auto an. flex: 0 1 auto;

.parent{
    display: flex;
    flex-direction: column;
}
.parent .child{
    flex: 0 1 auto;
}
0
Lasithds