Wie lässt sich ein Flexbox-Inhaltsbereich unabhängig scrollen, während untergeordnete Elemente überlaufen?

Scrollen einer Flexbox mit überquellendem Inhalt

Problem:

Bedenken Sie das folgende Layout:

[Bild des Layouts]

Im Inhaltsbereich Bei einem Überlauf scrollt die gesamte Seite und nicht nur der Inhaltsbereich selbst. Das Anwenden von „overflow: auto“ auf das Inhalts-Div löst dieses Problem, führt jedoch dazu, dass die Ränder der Spalten abgeschnitten werden.

Frage:

Wie kann der Inhaltsbereich Es kann so eingestellt werden, dass es unabhängig scrollt, während seine untergeordneten Elemente über die des Inhaltsfelds hinausragen können Höhe?

Antwort:

Laut Tab Atkins, dem Autor der Flexbox-Spezifikation, kann der folgende Ansatz verwendet werden:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

Durch das Festlegen von „min-height“ auf „min-content“ im Box-Div ragen die Spalten über die Höhe des Inhaltsfelds hinaus, während der Inhaltsbereich weiterhin vorhanden ist unabhängig voneinander scrollen. Aus Kompatibilitätsgründen sind möglicherweise Herstellerpräfixe erforderlich.

Das obige ist der detaillierte Inhalt vonWie lässt sich ein Flexbox-Inhaltsbereich unabhängig scrollen, während untergeordnete Elemente überlaufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!