/ / Flex-Flow-Spalte mit nebeneinander divs im Körper - html, css, css3, flexbox

Flex-Flow-Spalte mit nebeneinander divs im Körper - html, css, css3, flexbox

Wenn Sie versuchen, eine Spaltenflexbox mit Header, Body und Footer und dann innerhalb des Körpers auszuführen, haben Sie zwei divs Seite an Seite, die die Grenzen der Flex-Box respektieren (dh nicht die Fußzeile überlaufen).

html,
body {
height: 100%;
margin: 0;
}

.app {
display: flex;
flex-flow: column;
height: 100%;
}

.header {
flex: 0 1 auto;
border-style: solid;
border-width: 1px;
border-color: blue;
}

.body {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
border-style: solid;
border-width: 1px;
border-color: red;
}

.footer {
flex: 0 1 40px;
border-style: solid;
border-width: 1px;
border-color: green;
}

.inner {
position: absolute;
}
.left {
float: left;
width: 200px;
height: 100%;
}

.right {
margin-left: 225px;
height: 100%;
}

Einfacher Testfall in jfiddle

<div class="app">
<div class="header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="body">
<div class="inner">

<div class="left">
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
<p>test 1</p>
</div>
<div class="right">
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
<p>test 2</p>
</div>
</div>

</div>
<div class="footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>

https://jsfiddle.net/XJ45G19/9e7vjykv/

Bildbeschreibung hier eingeben

Irgendeine Idee, wo ich falsch liege? Vielen Dank im Voraus!

Antworten:

1 für die Antwort № 1

Buchung pro Anfrage als beantwortet:

Löschen position: absolute von .inner.


1 für die Antwort № 2

Es gibt keinen Überlauf in der Mitte .body Element, weil der Inhalt absolut positioniert wurde, was ihn aus dem normalen Fluss entfernt.

Sobald du es entfernst position: absolute von .innernimmt der Inhalt Platz ein und die vertikale Bildlaufleiste erscheint .body.