html - 如何让 flex 的 child 占据 100% 的高度

Question

我无法让复选框 div 占据 100% 的高度，如下面的代码/ fiddle 所示。正如您从第二个 child 看到的那样，高度为 100%(悬停不会占据 100% 的高度)，但我也希望第一个 child 的高度为 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，这使我们能够基于 flex 控制其任何子元素的垂直放置。

最后，我们希望复选框在 div.checkbox 中垂直居中。为此，我们可以将 align-self 规则添加到 input[type=checkbox] 中，如下所示:

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

对于一个工作示例，see this jsFiddle - 希望对您有所帮助!