CSS3 inline flexbox with ul list?

Question

I'm trying to set up a left meny where the `li` elements stretch to the entire height of the screen whatever the size of the screen. I can't have the li elements filling the whole height of the screen with the css3 flex property. I've been looking at a good documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ I'm working with a `ul` list of elements. Don't know if this is causing the problem .. This is what I'm trying to do: ``` #left-drawer-menu { width: 100%; list-style-type: none; margin: 0px; padding: 0px; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; } #left-drawer-menu li{ background-color: white; text-align: center; min-height: 100px; height: 20%; }

Accepted Answer

You need to :

a) set height 100% to all the elements chain, including the ul, the body and the html

b) set at least flex-grow to the elements

```
body, html {
    height: 100%;
    padding: 0px;
}

#left-drawer-menu {
    width: 100%;
    height: 90%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;

display: -webkit-flex;
    -webkit-flex-direction: column;

display: flex;
    flex-direction: column;
}

#left-drawer-menu li{
    background-color: white;
    text-align: center;
    flex-grow: 1;
}
```

fiddle

CSS3 inline flexbox with ul list?

Solution

Problem