Flexbox: Scrollendes Flexchild zwischen zwei anderen Flexchilds mit Inhaltsüberlauf - css, css3, flexbox

Ich habe einen modalen Dialog, der auf einem Overlay zentriert ist.

Der Dialog ist ein Flex-Container mit drei Flex-Kindern und hat eine maximale Höhe von 90%.

Wenn die Höhe des Dokuments kleiner ist als die benötigte Höhe des Modales, möchte ich, dass das zweite Kind (modal-body) das Scrollen ermöglicht.

<div class="modal">
<div class="modal-header"><h2>Modal Header</h2></div>
<div class="modal-body">  <!--this should scroll if modal-height > 90% -->
<!-- content -->
</div>
<div class="modal-controls"><!-- controls --></div>
</div>

Ich habe keine Ahnung, ob das mit reinem CSS möglich ist.

.modal {
position: relative;
width: 10em;
max-width: 90%;
max-height: 90%;
background-color: green;
display: flex;
flex-flow: row wrap;
}
.modal-header { flex: 1 auto; }
.modal-body {
flex: 1 auto;
overflow-y: scroll;
}
.modal-controls { flex: 1 auto; }

Hier ist ein Geige meiner Herangehensweise.

Wenn Sie die Größe des Ausgabefensters ändern, sehen Sie, dass der modale Dialog unten abgeschnitten wird, anstatt den Überlauf zu durchlaufen.

Danke im Voraus.

Antworten:

0 für die Antwort № 1

Das ist ziemlich einfach. Alles, was Sie brauchen, ist zu ersetzen

.modal {
...
flex-flow: row wrap;
}

mit

.modal {
...
flex-direction: column;
}

Und es funktioniert. Nicht erforderlich, aber Sie sollten auch verhindern, dass die modal-header- und modal-controls erweitert werden:

.modal-header, .modal-controls {
flex: 0 0 auto;
}
.modal {
...
flex: 1 1 auto;
}

Hier ist ein Arbeitsbeispiel


Speisekarte