如何让弯曲的孩子占据100％的高度答案

【问题标题】：How to get flexed child to take up 100% height如何让弯曲的孩子占据100％的高度
【发布时间】：2019-02-27 12:18:30
【问题描述】：

我无法使复选框 div 占据 100% 的高度，如下面的代码/小提琴所示。正如您从第二个孩子看到的那样，高度为 100%（悬停不占用 100% 的高度），但我也希望第一个孩子的高度为 100%。我如何做到这一点？

供将来参考的代码（由于 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>

【问题讨论】：

stackoverflow.com/a/31728799/3597276

标签： html css sass flexbox

【解决方案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
}

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

【讨论】：

有点奇怪它不会填满高度。