Safari flexbox nicht enthalten, seine Elemente richtig

Habe ich eine einfache flexbox-basierte Seite, die macht richtig in Google Chrome (Version 44.0.2403.157), aber nicht in Safari (ab Version 8.0.2 (10600.2.5)). Ich habe alle relevanten Präfixe (glaube ich) und haben viel Zeit, sich auf den Inspektor, aber ich weiß nicht scheinen, zu finden, die Ursache des Problems.

Die Seite besteht aus einem container und zwei flex-Zeilen. Die ersten flex-Zeile (Kopfzeile) sollte die Höhe Strecken, um zu passen Ihre Inhalte. Die zweite flex-Reihe ("content") haben, sollten ein Höhepunkt der browser-Höhe, abzüglich der header-Höhe der überlauf dieses Behälters, um zu scrollen. Der code funktioniert gut, wenn der content-container nicht scrollen, aber sobald der Inhalts-container hat keine überlauf der header-Zeile enthält nicht mehr deren Inhalt. Was könnte die Ursache sein?

Code:

<html>
<head>
    <style>
        .box {
            display: -ms-flexbox;  /* IE 10 */
            display: -webkit-flex; /* Safari 6 */
            display: flex;         /* Modern browsers */
            -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            flex-flow: column;
            height: 100%;
            width: 100%;
            border: 2px solid;
        }


        .box .row {
            flex: 0 1 30px;
            border: 2px solid;
            width: 100%;
        }

        .box .row.header {
            -ms-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            flex: 0 1 auto;
        }

        .box .row.content {
            -ms-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            overflow: scroll;
        }

    </style>
</head>

<body>
    <div id="page-wrapper" style="height: 100%">
        <div class="box">
            <div class="row header">
                <p>Header - The height of the header is based on the content</p>
                <p>Header - The height of the header is based on the content</p>
            </div> <!-- end of flex row header -->
            <div class="row content">
                <p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
            </div> <!-- end of flex row content -->
        </div> <!-- end of flex box -->
    </div> <!-- end of page wrapper -->
</body>
</html>

Richtig dargestellt, mit Inhalt box ohne überlauf:

Safari flexbox nicht enthalten, seine Elemente richtig

Falsch wiedergegeben, mit der content-box mit overflow:

Safari flexbox nicht enthalten, seine Elemente richtig

Soweit ich mich erinnere, hat Safari Probleme mit der Höhe der Werte als Prozentsätze beim Umgang mit Kindern display: flex Elemente. Wenn die Eltern ist ein Prozentsatz, der dann mit Kinder w/out deklariert Höhen führen könnte, die Sie Erben zu gleichen prozentualen Wert.
Also, Wenn ich will, dass die Eltern (Kasten) füllen immer die ganze Seite, Höhe, wie gehe ich bei der Einstellung, ohne einen Prozentsatz?
Ich kann das nicht testen, auf Safari, da bin ich auf eine Windows-Maschine, aber Sie können versuchen 100vh um das element gleich der Höhe des Viewports (der Bildschirm).
Ich habe versucht, 100vh und 100vw und das hat das problem nicht lösen.
In diesem Fall war es nicht die Verwendung von Prozentwerten für die Höhen, die das problem verursacht, wie die Antwort unten arbeitete noch mit prozentualen Höhen.

InformationsquelleAutor Alex Wetton | 2015-10-01

  1. 14

    Der Grund, warum die header nicht erweitert ist, weil Sie angegeben haben flex-shrink: 1 auf .box .row.header

    Sagen, dass der Inhalt erlaubt ist, zu schrumpfen lassen Sie sich die header bekommen gequetscht durch den content-Bereich unten.

    Ändern:

    .box .row.header {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

    :

    .box .row.header {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

    Und deine Seite funktioniert jetzt auch im Safari.

    Funktioniert perfekt
    schön 🙂 das ist eine (Lösung für) den klassischen Fall von FlexBug #1! github.com/philipwalton/...
    Große Arbeit! danke.

    InformationsquelleAutor ratherblue

  2. 1

    Dies war ein bug in älteren Versionen von Safari und dem Umgang mit der flexbox. In der neuesten version 10.0.1, dies ist behoben.

    InformationsquelleAutor Michael Schultz

Schreibe einen Kommentar