flexbox列子项的高度100％

本文介绍了flexbox列子项的高度100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我对flexbox列有麻​​烦，因为flex'd元素的子元素不会以百分比回应 height 。我只在Chrome中检查过这个，从我的理解是一个Chrome的唯一问题。这是我的例子：I'm having troubles with a flexbox column in that children of the flex'd element don't respond to height in percentages. I've only checked this in Chrome, and from what I understand it's a Chrome only problem. Here's my example: HTML<div class='flexbox'> <div class='flex'> <div class='flex-child'></div> </div> <div class='static'></div></div> CSS.flexbox{ position:absolute; background:black; width:100%; height:100%; display: flex; flex-direction:column;}.flex{ background:blue; flex:1;}.flex-child{ background:red; height:100%; width:100%; display:block;}.static{ background:green; width:100%; height:5rem;} 这是CodePen。我想要的是红色 .flex-child 填充蓝色 .flex 。为什么 height：100％有效？I want it so the red .flex-child fills the blue .flex. Why doesn't height:100% work?推荐答案 TL; DR：将 .flex 设置为 display：flex ，除去 height：100％在 .flex-child 。 您可以在此处查看修改后的CodePen。TL;DR: Set .flex to display:flex, and get rid of the height:100% on .flex-child. You can see the modified CodePen here. 工作原理：我在这个类似问题，根据flexbox规范， align-self：stretch 值（flex'd元素的默认值）更改只有元素的跨尺寸属性（在本例中为 height ）的 used value 。不过，百分比是根据父项的跨尺寸属性的指定值计算的，而不是使用的值。如果您曾打开检查器，并在计算机下的样式下找到 height：100％，但 height：1200px '，则会分别显示指定的 和 值。I learned from this similar question that, according to the flexbox spec, an align-self:stretch value (the default for a flex'd element) changes only the used value of an element's cross-size property (in this case, height). Percentages however are calculated from the specified value of the parent's cross-size property, not it's used value. If you ever crack open your Inspector and see height:100% under 'Styles' but height:1200px under 'Computed', then that's showing you the specified and used values respectively. Chrome似乎遵循规范在这方面的三通。这意味着在 .flex-child 上设置 height：100％表示指定 height 的 .flex 。因为我们没有在 .flex 上指定 height ，这意味着我们正在抓取100％ code> height ，即 auto 。It seems that Chrome follows the spec to the tee in this respect. That means that setting height:100% on .flex-child means 100% of the specified height of .flex. Since we haven't specified a height on .flex, that means we're grabbing 100% of the default height, which is auto. See why the layout engine is getting confused?设置 .flex 到 display：flex ，并从 .flex-child 中删除​​ height：100％不断尝试设置 auto 的100％将使 .flex-child 填充 .flexSetting .flex to display:flex and removing the height:100% from .flex-child (so that it doesn't keep trying to set 100% of auto) will make .flex-child fill all of .flex 此操作无效时：如果你只想填充 .flex 中的一些，尝试将 .flex-child 设置为 height：90％，因为弯曲子项意味着它将填充所有可用空间。我认为你可能可以通过绝对定位攻击它，但是这似乎也不工作。你可以通过在 .flex 中添加第二个子类来调用 .spacer ，并设置 .spacer 到 flex：1 和 .flex-child 到 flex：9 （一定要在上设置 flex-direction：column $ c>）。一个黑客，但我唯一的方法，我可以解决它。 这是CodePen。This won't work if you're trying to fill only some of .flex, ex. trying to set .flex-child to height:90%, because flexing the child means that it'll fill all the available space. I thought you might be able to hack it with absolute positioning, but that doesn't seem to work either. You could hack by adding a second child to .flex that we'll call .spacer, and setting .spacer to flex:1 and .flex-child to flex:9 (be sure to set flex-direction:column on .flex too). A hack, but the only way I could fix it. Here's the CodePen.希望我们不必继续依靠这一点，他们只是改变规格以更好地采取行动。Hopefully we don't have to keep relying on this though and they'll just change the spec to act more as expected. 这篇关于flexbox列子项的高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！