Как согнуть ребенка, чтобы поднять на 100% рост

Question

Я не могу заставить чекбокс div занимать 100% высоты, как видно из кода / скрипта ниже.Как вы можете видеть из второго ребенка, рост составляет 100% (при наведении курсора не занимает 100% высоты), но я также хотел бы, чтобы первый ребенок был на 100% роста.Как мне этого добиться?

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

Код для использования в будущем (не используется из-за 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>

Answer 1

Этого можно достичь, внеся несколько изменений в свой SCSS.Во-первых, вы можете удалить следующие правила из div.checkbox и добавить display:flex

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

    display:flex; // Add this

    ...
}

Добавив правило display:flex к div.checkbox, это дает нам основанный на гибкости контроль над вертикалью.размещение любого из его дочерних элементов.

Наконец, мы действительно хотим, чтобы флажок располагался вертикально по центру div.checkbox.Для этого мы можем добавить правило align-self к input[type=checkbox] следующим образом:

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

В качестве рабочего примера см. Этот jsFiddle - надеюсь, это поможет!