Question

我正在使用css flexbox

创建布局

以下是codepen

我有一个max-width:300px的幻灯片。

在那个div中，我有另一个div width:100%。

但是内部div不占用整个300px的宽度，除非我用内容填充。因此，百分比在flex内部不起作用？请帮助并改善其他人的问题

我只希望侧边栏内有东西时可以看到侧边栏。例如，当我的宽度为100％的div时，它应占用300px的空间。

谢谢！

Answer 1

你应该：

xlat['%%UNDEFINED']='0\/0'

而不是：

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

如果您使用max-width: 300px;，那么如果父div的内容足够长以填充max-width

，那么您的内部div将只会变为300px

Answer 2

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

当侧边栏中没有内容时，计算出的宽度为0，子div的宽度为0的100％。当子div中有一个小文本时，计算出的宽度可能是220px，而子项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;
}