How to get flexed child to take up 100% height

Question

I can't make the checkbox div take up 100% height as seen with the code/fiddle below. As you can see from the second child, the height is at 100% (hover doesn't take up 100% of the height), but I'd also like the first child to be at 100% height. How do I achieve this?

jsfiddle: https://jsfiddle.net/s3hdx14u/

Code for future reference (not usable due to scss)

ul {
    &.content {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    li {
        align-items: center;
        display: flex;
        flex-direction: row;
        overflow: auto;

        & + li {
            border-top: 5px solid black;
        }

        div.checkbox {
            height: 100%;
            flex: 1;
            align-items: stretch;
            flex-shrink: 0;
            &:hover {
                background-color: green;
            }
            input[type=checkbox] {
    
            }
        }

        div.container {
            padding: 10px;
            width: 100%;
            &:hover {
                background-color: lighten(lightblue, 10%);
                cursor: pointer;
            }
        }

        header {
            font-size: 125%;
            font-weight: bold;
            .small {
                font-size: 80%;
                font-weight: normal;
            }
        }        
    }
}

        <ul class="content">
            <li 
                v-for="(result, key) in results" 
                :key="key"
            >
                <div class="checkbox">
                    <input 
                        type="checkbox" 
                    />
                </div>
                <div>
                  content<br>
                  content<br>
                  content<br>
                  content<br>                  
                </div>
            </li>
        </ul>

https://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Sep 24 '18 at 02:10 — Michael Benjamin, Sep 24 '18 at 02:10

score 1 · Accepted Answer · answered Sep 24 '18 at 02:58

This can be achieved by making a few adjustments to your SCSS. First, you can remove the following rules from div.checkbox, and add display:flex

div.checkbox {
    // height: 100%;
    // flex: 1;
    // align-items: stretch;
    // flex-shrink: 0;

    display:flex; // Add this

    ...
}

By adding the display:flex rule to the div.checkbox, this gives us flex-based control over the vertical placement of any of it's child elements.

Lastly, we want to actually want the checkbox to center vertically in the div.checkbox. To do this, we can add the align-self rule to input[type=checkbox] as follows:

input[type=checkbox] {    
    align-self: center; // Add this
}

For a working example, see this jsFiddle - hope that helps!

kinda strange how it won't fill up the height. – A. L Sep 24 '18 at 02:59 — A. L, Sep 24 '18 at 02:59

How to get flexed child to take up 100% height

1 Answers1