如何讓彎曲的孩子占據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 ，這使我們可以對任何子元素的垂直位置進行基於 flex 的控制。

最后，我們希望復選框在div.checkbox垂直div.checkbox 。 為此，我們可以將align-self規則添加到input[type=checkbox] ，如下所示：

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

有關工作示例，請參閱此 jsFiddle - 希望有所幫助！