Machen Sie zwei Flex Items je 50% Höhe des Elternteils

Question

Ich benutze css flex Layout um ein Dashboard zu erstellen und möchte zwei Widgets (eins übereinander) in einem Flex Item platzieren und sie 50% Höhe machen ihre Eltern jederzeit (unabhängig vom Inhalt). Also, wenn meine HTML ist:

<div class="flex-container"> 
    <div class="flex-item"> 
    <div class="widget" id="w1"> 
     widget 1 content 
    </div> 
    <div class="widget" id="w2"> 
     widget 2 content 
    </div> 
    </div> 
</div> 

und meine CSS wie folgt aussieht:

.flex-container { 
    display: flex; 
    flex-direction: column; 
} 
.flex-item { 
    flex: 1; 
} 

Wie kann ich die beiden .widget s immer 50% Höhe von .flex-item besetzen?

Ich habe versucht:

.flex-item { 
    flex: 1; 
    display: flex; 
} 
.widget { 
    flex: 1; 
} 

Das funktioniert aber nur, wenn der Inhalt in den beiden Widgets sind die gleichen.

Ich habe eine mehr elaborate jsfiddle aufgearbeitet, um mein Problem besser zu veranschaulichen.

Vielen Dank im Voraus!

Answer 1

Wenn Sie sagen, dass flex: 1funktioniert nur, wenn der Inhalt in beiden Widgets die gleichen sind, ist das nicht korrekt. Das würde den Zweck von flex: 1 besiegen.

flex: 1 sagt Flex-Elemente, Container-Raum gleichmäßig untereinander zu verteilen. Wenn es vier Flex Items mit flex: 1 gibt, nimmt jeder 25%. Drei würden 33,33% einnehmen. Und zwei Flex-Gegenstände werden 50% kosten. Dies ist unabhängig von der Inhaltsmenge.

Sehen Sie diese Abbildung: DEMO

---

Das Problem, das Sie haben sind in dem Code nicht klar Sie in der Frage gepostet. Es ist jedoch offensichtlich in Ihrer Geige Demo.

Sie haben einen Hauptbehälter mit einer height: 400px. Sie haben auch eine Regel, die Ihren Divs 10px-Padding rundum hinzufügt. Dies fügt jedem Div 20px Höhe hinzu. Sie haben auch eine Kopfzeile mit height: 2em.

Wenn Sie die zusätzlichen Höhen berücksichtigen, funktioniert das Layout.

Versuchen Sie diese Anpassungen:

HTML (keine Änderungen)

CSS

div { 
    box-shadow: inset 0 0 0 1px rgba(30, 100, 200, 0.5); 
    padding: 10px;     /* sneaky villain */ 
    font-family: arial; 
} 

h1, p { margin: 0; } 

#main-wrapper { 
    height: 400px;     /* primary height */ 
    display: flex; 
    flex-direction: column; 
} 

#header { 
    flex-shrink: 0; 
    height: 2em;      /* header height */ 
} 

#main-column-wrapper { 
    flex: 1; 
    display: flex; 
    flex-direction: row; 
    height: calc(100% - 2em - 20px); /* primary height - header height - padding */ 
} 

#side-column { 
    width: 20%; 
    flex-shrink: 0; 
} 

#main-column { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    height: calc(100% - 40px);  /* main-column-wrapper height - padding (2 divs) */ 
} 

#widget1, 
#widget2 { 
    flex: 1; 
    flex-shrink: 0; 
    overflow: auto; 
} 

Revised Fiddle

Eine andere Möglichkeit wäre box-sizing: border-box zu verwenden, um die Polsterung zu justieren . Erfahren Sie mehr hier: https://css-tricks.com/box-sizing/