flex内部的div没有填满整个空间答案

【问题标题】：Inner div inside flex not filling whole spaceflex内部的div没有填满整个空间
【发布时间】：2015-07-01 18:51:45
【问题描述】：

我正在使用 css flexbox 创建布局

这里是codepen

我有一个带有 max-width:300px 的 flex div。

在那个 div 里面，我有另一个 div，带有 width:100%。

但内部 div 不会占用整个 300px 宽度，除非我用内容填充它。所以百分比在 flex 中不起作用？请帮助并为其他人改进这个问题

我只希望在边栏中有内容时显示边栏。例如，当我有一个宽度为 100% 的 div 时，它应该占用 300px 的空间。

谢谢！

【问题讨论】：

标签： css flexbox

【解决方案1】：

你应该有：

 .halobi-sidebar {  
  background-color: green;
  width: 300px;
 }

而不是这个：

max-width: 300px;

如果你使用max-width，那么你的内部div只有在父div的内容长到足以填满300px时才会变成300px

【讨论】：

但这将始终显示侧边栏。我只希望它在侧边栏中有东西时可见。例如，当我有一个宽度为 100% 的 div 时，它应该占用 300px 的空间。所以我希望它能够像 position:relative; 的 div 一样工作
如果你不希望侧边栏一直可见，那么使用max-width也可以，请尝试将内部div的min-height设置为1px.like this @987654330 @
仍然没有按预期工作。当您在弹性项目内时，百分比似乎没有任何效果。非常感谢您的宝贵时间。

【解决方案2】：

侧边栏没有设置任何宽度。因此，它从其中的内容中获取宽度。当您说 width: 100% 时，它表示父元素的 computed 宽度的 100%。

当侧边栏中没有内容时，计算宽度为0，子div的宽度为0的100%。当子div中有少量文字时，计算宽度可能为220px，子div div 也是 220px。

您会看到浮动或定位元素的相同行为，因为它们没有任何内容的默认宽度也是 0。具有默认块显示的静态定位 div 的默认宽度为 100%。

为什么不使用:empty 选择器？

.halobi-sidebar {  
  background-color: green;
  width: 300px;
}
.halobi-sidebar:empty {  
  display: none;
}

另一种选择是使用子元素而不是侧边栏本身设置 300px：

.halobi-sidebar {  
  background-color: green;
}
.halobi-sidebar > * {  
  width: 300px;
}

【讨论】：