webentwicklung-frage-antwort-db.com.de

Wie strecke ich das Flex-Kind, um die Höhe des Behälters zu füllen?

Ich muss ein gelbes Kind strecken, um die gesamte Höhe des Elternteils auszufüllen. Ohne Einstellung der Elternhöhe. Die Höhe des Elternteils sollte vom blauen Kindertext abhängig sein . https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

htmlcsscss3flexbox
8
Konstantin Vahrushev

Bei der Verwendung von Flexbox besteht der größte Fehler darin, height: 100% überall zu verwenden.

Wir sind das in vielen Fällen gewöhnt, obwohl es bei Flexbox oft kaputt geht.

Die Lösung ist einfach: Entfernen Sie einfach den height: 100% und es wird automatisch funktionieren.

Der Grund dafür ist für flex item in row direction (Standardeinstellung), der align-items steuert das vertikale Verhalten, und als Standardeinstellung ist stretch diese Funktion so, wie sie ist.

Stapelschnipsel

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

24
LGSon

Wenn ich es richtig verstanden habe, suchen Sie nach der align-items-Eigenschaft, die das Layout entlang der Querachse definiert, in diesem Fall vertikal.

Eine gute Übersicht finden Sie hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}
<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

3
Daniel Sixl

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>

  </div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

0
kyl