Wie kann ich Flexbox-Elemente zu 100 % der Höhe ihres Elternelements machen?

Question

Ich versuche, den vertikalen Platz eines Flex-Elements innerhalb eines Flexbox auszufüllen.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Und hier ist der JSFiddle

flex-2-child füllt die erforderliche Höhe nicht aus, außer in den beiden Fällen, in denen:

1. flex-2 eine Höhe von 100% hat (was seltsam ist, weil ein Flex-Element standardmäßig 100% hat + es in Chrome fehlerhaft ist)
2. flex-2-child position:absolute hat, was auch unpraktisch ist

Dies funktioniert derzeit nicht in Chrome oder Firefox.

Answer 1

Wusstest du schon: Höhe-100% funktioniert im neuesten Chrome; aber nicht in Safari;

---

Also wäre die Lösung in Tailwind

"flex items-stretch"

https://tailwindcss.com/docs/align-items

und wird rekursiv auf das Kind des Kindes des Kindes angewendet ...

Answer 2

.container { . . . . align-items: strecken; . . . . }

Answer 3

Dies ist meine Lösung unter Verwendung von css+.

Zunächst einmal, wenn das erste Kind (flex-1) 100px sein soll, sollte es nicht flex sein.

In css+ können Sie tatsächlich flexible und/oder statische Elemente (Spalten oder Reihen) festlegen, und Ihr Beispiel wird so einfach wie folgt:

      100px
      flex

Container CSS:

.container {
    height: 200px;
    width: 500px;
    position: relative;
}

Und natürlich css+ 0.2 Kern einschließen.

Hier ist der Fiddle.