Wie fülle ich den verbleibenden vertikalen Raum in einem Container mit CSS Flexbox?

Verbleibenden vertikalen Raum mit #second füllen

Um den verbleibenden vertikalen Raum von #wrapper unter #first mit #second div zu füllen, verwenden Sie Allein mit CSS können Sie die folgenden Schritte ausführen:

1. HTML und Text so einstellen, dass sie 100 % Höhe ohne Ränder einnehmen.
2. Weisen Sie display: flex, flex-direction: Spalte zu übergeordneter Container .wrapper.
3. Geben Sie .first die spezifische Höhe an.
4. Setzen Sie flex-grow: 1 auf .second, damit es sich ausdehnt, um den verbleibenden Platz einzunehmen.

Hier ist der CSS-Code:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

Das obige ist der detaillierte Inhalt vonWie fülle ich den verbleibenden vertikalen Raum in einem Container mit CSS Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!