Question

如下面的代码/小提琴所示，我无法使复选框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>

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
}

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

如何让有弹性的孩子占据100％的身高

1 个答案: