Gleiche Höhe Flex-Elemente in Flex-Spalten

Question

Ich versuche es zu machen, so dass Elemente in einer Spalte gleiche Höhe innerhalb ihrer Liste haben. Hier

ist, was ich habe:

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

ich versucht habe: ich versucht haben, dieses Tutorial zu folgen: https://css-tricks.com/boxes-fill-height-dont-squish/ ohne Erfolg. Ich denke, das Problem hat mit zu tun, Höhe zu setzen: 100% zu jedem einzelnen Elternelement den ganzen Weg zu HTML. Kann das richtig sein?

Meine Liste ist tief verschachtelt und das Setzen all dieser Höhen bricht das Layout. Ich würde es vorziehen, nur mit Flüssigkeitshöhen zu arbeiten.

Ich habe auch versucht: dies mit nur divs anstelle einer Liste zu erreichen. Immer noch kein Glück.

Irgendwelche Hinweise?

Answer 1

Da Sie eine prozentuale Höhe auf dem Flex-Container verwenden ...

ol { min-height: 100%; } 

... müssen Sie auch define a height for the parent and root elements.

HTML (keine Änderungen)

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

CSS

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
           set at 90% just for demo purposes */ 
ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

DEMO: http://jsfiddle.net/kzL4305k/1/

Ich denke, die Mühe zu tun hat mit mit 0 setzenzu jedem einzelnen Elternelement den ganzen Weg zu html. Kann das richtig sein?

Ja, das ist richtig. Wenn Sie prozentuale Höhen verwenden, müssen Sie die Höhe für jedes einzelne übergeordnete Element bis zum Stammelement angeben (html).

• Working with the CSS height property and percentage values

Meine Liste ist tief verschachtelte und diese Höhen aller Einstellung bricht das Layout: Ich habe den Grund dafür erklärt. Ich würde es vorziehen, nur mit Flüssigkeitshöhen zu arbeiten.

Sie müssen die Höhe für übergeordnete Elemente nicht festlegen, wenn Sie keine Prozentsätze verwenden. Verwenden Sie min-height in Pixeln auf Flexcontainern und lassen Sie dann flex-grow: 1 mit dem Höhenproblem für Flex-Elemente umgehen.

Answer 2

Fügen Sie einfach die folgende CSS

ol { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: stretch; 
    -webkit-align-items: stretch; 
    -ms-flex-align: stretch; 
    align-items: stretch; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
ol li { 
    background: gold; 
    padding: 5px 5px; 
    margin: 5px 5px; 
    width: 25% 
}