如何让柔韧的孩子占据100%的高度
如何让柔韧的孩子占据100%的高度
提问于 2018-09-24 01:20:34
我不能让复选框div占据100%的高度，如下面的代码/小提琴所见。你可以从第二个孩子看到，高度是100% (悬停并不占高度的100% )，但我也希望第一个孩子在100%的高度。我怎样才能做到这一点？
小提琴手：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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-24 02:58:14
这可以通过对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 -希望这有帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52471667
复制相关文章
相似问题
腾讯云开发者
