Chrome / Safari keine Füllung 100% Höhe der flex-Eltern

Ich möchte ein vertikales Menü mit einer bestimmten Höhe.

Jedes Kind ausfüllen müssen, die Höhe der Eltern-und haben Mitte ausgerichteter text.

Die Anzahl der Kinder ist zufällig, so habe ich zu arbeiten mit dynamischen Werten.

Div .container enthält eine zufällige Anzahl von Kindern ( .item ), die haben immer zu füllen, die Höhe der Eltern. Zu erreichen, die ich verwendet flexbox.

Für die Herstellung von links mit text, ausgerichtet an der Mitte bin ich mit display: table-cell Technik. Aber über die Tabelle zeigt, benötigt mit einer Höhe von 100%.

Mein problem ist, dass .item-inner { height: 100% } funktioniert nicht in webkit (Chrome).

Gibt es eine Lösung für dieses problem?
Oder gibt es eine andere Technik, um alle .item füllen Sie die Höhe von der Elternteil, bei text vertikal ausgerichtet, auf mittleren?

Hier z.B. jsFiddle, sollte angezeigt werden in Firefox und Chrome

CSS:

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

HTML:

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

es wurde nun behoben - bugs.chromium.org/p/chromium/issues/detail?id=426898
Das ist nicht besonders relevant zu OP, aber relevant sein könnte, für die Googler, die hier landen, für "safari-Anzeige der absoluten Höhe 100% funktioniert nicht" oder etwas ähnliches. Ich habe ein element wie dieses auch in einem flex-container und musste angeben top:0 und left:0 zu haben, die es so erscheinen, als erwartet.
noch nicht behoben wurde, noch: stackoverflow.com/questions/46226298/...

InformationsquelleAutor Ricardo Castañeda | 2015-11-10

317

Lösung

Verschachtelte flex-Containern.

Loszuwerden Prozentsatz Höhen. Loszuwerden Tabelle Eigenschaften. Loswerden vertical-align. Vermeiden Sie absolute Positionierung. Nur stick mit flexbox den ganzen Weg durch.

Gelten display: flex auf die flex-Element (.item), so dass es ein flex-container. Dieser stellt automatisch align-items: stretch, was sagt das Kind (.item-inner) erweitern die volle Höhe des übergeordneten Elements.

Wichtig: entfernt den angegebenen Höhen von flex-Elemente für diese Methode zu arbeiten. Wenn ein Kind hat eine Höhe angegeben (z.B. height: 100%), dann wird es ignoriert die align-items: stretch kommen von den Eltern. Für die stretch Standard zu arbeiten, Größe des Kindes berechnen muss, um auto (vollständige Erklärung).

Probieren (keine änderungen an der HTML -):

CSS:
```
.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}
```
HTML:
```
<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>
```
jsFiddle demo

Erklärung

Mein problem ist, dass .item-inner { height: 100% } ist nicht in der
webkit (Chrome).

Funktioniert es nicht, da Sie prozentualen Höhe, in einer Weise, die nicht konform mit der traditionellen Implementierung der spec.

10.5 Inhalt Höhe: die height Eigenschaft

Prozentsatz
Gibt eine prozentuale Höhe an. Der Prozentsatz wird berechnet, mit Bezug auf die Höhe der erzeugten box
mit block. Wenn die Höhe des umschließenden Blocks nicht
explizit angegeben und dieses element ist nicht absolut positioniert, wird der Wert berechnet, um auto.

auto
Die Höhe hängt von den Werten anderer Eigenschaften.

In anderen Worten, für die prozentuale Höhe mit der Arbeit an einer in-flow-Kind, den Eltern muss haben eine Höhe festlegen.

In Ihrem code, die top-level-container mit fester Höhe: .container { height: 20em; }

Den third-level-container mit fester Höhe: .item-inner { height: 100%; }

Aber zwischen Ihnen, die second-level-container – .item – nicht haben eine definierte Höhe. Webkit sieht, dass da ein link fehlt.

.item-inner sagt Chrome: mir height: 100%. Chrom sieht auf den übergeordneten (.item) für Referenz-und antwortet: 100% von was? Ich sehe nichts (ignoriert die flex: 1 Regel, dass es ist). Als Ergebnis, es gilt height: auto (Inhalt Höhe), in übereinstimmung mit der spec.

Firefox, auf der anderen Seite, jetzt übernimmt ein Elternteil die flex-Höhe als Referenz für das Kind der prozentualen Höhe. IE11 und Edge akzeptieren flex-Höhen, als auch.

Auch, Chrome akzeptieren flex-grow als eine angemessene parent-Referenz , wenn verwendet, in Verbindung mit flex-basis (beliebiger numerischer Wert arbeitet (auto nicht), einschließlich flex-basis: 0). Als dieses schreiben jedoch, diese Lösung scheitert im Safari.

CSS:
```
#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}
```
HTML:
```
<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>
```
Vier Lösungen

1. Geben Sie eine Höhe an alle Eltern-Elemente

Eine zuverlässige cross-browser-Lösung ist die Angabe der Höhe auf alle übergeordneten Elemente. Dies verhindert, dass missing links, die die Webkit-basierten Browser betrachten ein Verstoß gegen die Spezifikation.

Beachten Sie, dass min-height und max-height sind nicht akzeptabel. Es muss die height Eigenschaft.

Mehr details hier: Arbeiten mit CSS height - Eigenschaft und die prozentualen Werte

2. CSS Relative & Absolute Positionierung

Gelten position: relative dem Mutterunternehmen und den position: absolute für das Kind.

Größe des Kindes mit height: 100% und width: 100% oder verwenden Sie die offset-Eigenschaften: top: 0, right: 0, bottom: 0, left: 0.

Mit absoluter Positionierung, prozentuale Höhe arbeitet, ohne eine der angegebenen Höhe auf die Muttergesellschaft.

3. Entfernen Sie unnötige HTML-Container (empfohlen)

Ist es erforderlich, die zwei Container um button? Warum nicht entfernen .item oder .item-inner oder beides? Obwohl Taste - Elemente, manchmal nicht als flex-Container, können Sie flex-Elemente. Sollten Sie button ein Kind .container oder .item und das entfernen überflüssiger mark-up.

Hier ein Beispiel:

CSS:
```
.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}
```
HTML:
```
<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>
```
4. Verschachtelte Flex-Containern (empfohlen)

Loszuwerden Prozentsatz Höhen. Loszuwerden Tabelle Eigenschaften. Loswerden vertical-align. Vermeiden Sie absolute Positionierung. Nur stick mit flexbox den ganzen Weg durch.

Gelten display: flex auf die flex-Element (.item), so dass es ein flex-container. Dieser stellt automatisch align-items: stretch, was sagt das Kind (.item-inner) erweitern die volle Höhe des übergeordneten Elements.

Wichtig: entfernt den angegebenen Höhen von flex-Elemente für diese Methode zu arbeiten. Wenn ein Kind hat eine Höhe angegeben (z.B. height: 100%), dann wird es ignoriert die align-items: stretch kommen von den Eltern. Für die stretch Standard zu arbeiten, Größe des Kindes berechnen muss, um auto (vollständige Erklärung).

Probieren (keine änderungen an der HTML -):

CSS:
```
.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}
```
HTML:
```
<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>
```
jsFiddle
- Ich reparierte mein Problem mit height:auto
- nur eine Bemerkung stammt aus der Erklärung link zu diesem tollen Beitrag - "align-items: stretch" macht flex Kinder zu erweitern über die Querachse des container - das ist die Strecke für Kinder auf die Höhe der flex-container sollte flex-Richtung Zeile.
- Ich kann bestätigen, dass die Verwendung von geschachtelten flex-Container am besten funktioniert. Wir verwendet flexbox uneinheitlich in unsere Speisekarte. Anstelle der Verwendung von flex: 1 und die display: flex auf den übergeordneten Container, die wir verwendet, Höhe: 100% auf einigen Plätzen. Alles funktioniert wie erwartet, nachdem wir Sie ersetzt die entsprechenden Definitionen. Danke @Michael_B für den Tipp! 🙂
InformationsquelleAutor Michael_B
5

Lösung: Entfernen Sie height: 100% im .Element-inner und fügen Sie display: flex im .Element

Demo: https://codepen.io/tronghiep92/pen/NvzVoo
- Danke, das hat mir geholfen. Machen flex Kinder nehmen automatisch Strecken, um die Höhe der container? Ist das der Grund, warum das funktioniert?
- ja, zu deinen Fragen. Dies erklärt sich in meiner Antwort. Siehe Lösung #4.
InformationsquelleAutor nghiepit
1

Für den Mobilen Safari gibt Es ein Browser-Update. man muss hinzufügen, - webkit-box - für iOS-Geräte.

Ex.
```
display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;
```
wenn Sie align-items: stretch; - Eigenschaft für das übergeordnete element, entfernen Sie die height : 100% von der Kind-element.

InformationsquelleAutor Narasinghe
0

Ich hatte ein ähnliches Problem in iOS 8, 9 und 10 und die info oben konnte es nicht reparieren, jedoch habe ich entdecken Sie eine Lösung, die nach einem Tag der Arbeit an diesem. Zugegeben, es wird nicht für jeder arbeiten, aber in meinem Fall meine items gestapelt wurden, in einer Spalte, und hatte 0 die Höhe, wenn es gewesen sein sollte, Inhalt, Höhe. Umschalten der css zu Zeile und wickeln Sie das Problem beseitigt haben. Dies funktioniert nur, wenn Sie ein einzelnes Element, und Sie werden gestapelt, aber da hat es mich einen Tag, um das herauszufinden, dachte ich, ich sollte mein Anteil fix!
```
.wrapper {
    flex-direction: column; //<-- Remove this line
    flex-direction: row; //<-- replace it with
    flex-wrap: wrap; //<-- Add wrapping
}

.item {
    width: 100%;
}
```
InformationsquelleAutor Designer023

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Lösung

Erklärung

Vier Lösungen

jsFiddle