我不明白为什么我的具有height auto的div会占用其父级的全部高度

马塞洛·佩雷拉(Marcelo Perrella)

我有一个div.column使用flexbox包含多个内部的div.grid。div.column由于内部内容较多而导致高度增加时,其他所有div.column高度也会增加。

对我来说,这是无济于事的,因为它们的高度设置为自动。

另外,我的网格使用的是flex显示器flex-wrap: wrap我认为是造成这种情况的原因,但我没有找到任何解释为什么会改变孩子的身高。

我尝试以不同的组合和方式更改父级和子级的以下属性:位置,显示,高度。

这些只是计算的样式,不是我的实际代码。

div.grid {
    display: flex;
    flex-wrap: wrap;
    width: 960px;
}

div.column {
    display: block;
    flex-basis: 37.5%;
    flex-grow: 0;
    flex-shrink: 0;
    /* height is actually set to auto, but it is computed like this */
    height: 132px;
}
<div class="grid">
    <div class="column">something</div>
    <div class="column">something<br>else<br>here</div>
    <div class="column">something</div>
</div>

我希望当孩子们都没有相同数量的内容时,孩子们不会占据父母的全部身高。

在此处输入图片说明

马塞洛·佩雷拉(Marcelo Perrella)

正如LGSon在评论中所说的那样:

使用flex: display自动默认align-items,以stretch使孩子们的高度拉伸以填充包装的高度。计算的属性中也未显示它,这就是为什么它没有让我检查的原因。

因此,解决方案是将添加align-items: flex-start.grid

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

绝对定位的黑屏覆盖div的文本,但不覆盖图像,我不明白为什么

我有分段错误,我不明白为什么

不明白为什么我的函数没有被调用

我不明白为什么编译

我不明白为什么这些变量具有这些值

我不明白为什么我的波形是这样出来的

我不明白为什么我的团队失败了

我不明白为什么我的 super() 产生错误

为什么即使div没有高度,翻译转换仍会占用空间?

不明白为什么我需要提升权限的令牌才能访问具有完全访问权限的文件夹

我不明白我的程序有什么问题

我的循环永无止境...我不明白为什么。有任何想法吗?

(FLASK) 我不明白为什么我的 html 文件没有更新/渲染

我不明白为什么我没有MVC AJAX

我不明白为什么气球在我制作的小游戏中没有移动

我有这个错误:无法读取null的属性“值”,我不明白为什么

我“解决”了 FizzBuzz,但我不明白它为什么有效

我不明白为什么我会收到这个错误:[...] 有多个参数值 [...]

我有一个无限的 while 循环,但我不明白为什么

我不明白为什么我的递归函数没有按预期运行

我的变量没有除,我不明白为什么

需要具有div元素以填充其父级的高度

phpExcel TextValueBinder不明白为什么我需要它

索引超出范围-我不明白为什么

我不明白为什么发生此类ClassCastException

我不明白为什么会收到以下错误

元数据已还原,我不明白为什么

我不明白为什么for循环变为无限?

测试失败,我不明白为什么乐