扩展侧边栏时缺少背景颜色

我想创建一个侧边菜单，它是一个狭窄的右边栏，其中的图标在一列中。可以有更多的图标/按钮，然后是可用的垂直空间，我想要实现的是在侧栏上悬停显示这些图标，剩下的图标将展开到左侧！请运行演示片段。我的问题是，侧栏上没有足够空间的图标被左侧包装到一个新列中，因为我应用了这些flex规则，这些是正确的，但是那些元素不会有侧边栏的背景，它是不好。我希望我的问题清楚。感谢扩展侧边栏时缺少背景颜色

.container { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    margin: 20px; 
 
    border: 1px solid red; 
 
    margin: 10px; 
 
} 
 

 
.sidebar { 
 
    background-color: lightgrey; 
 
    display: flex; 
 
    flex-flow: column wrap-reverse; 
 
    overflow: hidden; 
 
} 
 

 
.sidebar:hover { overflow: visible; } 
 

 
.icon { 
 
    width: 20px; 
 
    height: 20px; 
 
    padding: 5px; 
 
} 
 

 
.icon path { fill: white }

<div class="container"> 
 
    <div class="content">hover over sidebar</div> 
 
    <div class="sidebar"> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    </div> 
 
</div>

来源

2017-07-24 Jim-Y

的边栏需要宽度溢出过的内容。如果没有宽度，背景将不会应用于悬停时溢出内容的部分。

下面是更新后的代码：https://jsfiddle.net/Lm6ey2sa/

希望帮助！

.container { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    margin: 20px; 
 
    border: 1px solid red; 
 
    margin: 10px; 
 
} 
 

 
.sidebar { 
 
    background-color: lightgrey; 
 
    display: flex; 
 
    flex-flow: column wrap-reverse; 
 
    overflow: hidden; 
 
} 
 

 
.sidebar:hover { overflow: visible; width: 75px; } 
 

 
.icon { 
 
    width: 20px; 
 
    height: 20px; 
 
    padding: 5px; 
 
} 
 

 
.icon path { fill: white }

<div class="container"> 
 
    <div class="content">hover over sidebar</div> 
 
    <div class="sidebar"> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    <img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_98883.svg" /> 
 
    </div> 
 
</div>

来源

2017-07-24 13:31:45

嘿，感谢@JayShah，与此唯一的问题是，我不知道备用图标多少列取。在这个例子中，容器包装成2列，但如果我将有更多的图标，它可能会包装成3列等等。所以至少我需要自动设置宽度。但根据这个相当类似的问题https://stackoverflow.com/questions/23408539/how-can-i-make-a-displayflex-container-expand-horizontally-with-its-wrapped-con没有自动的方式来做这个。 –

是的，我想到了自动宽度，似乎没有办法做到这一点。这就是为什么我用手动宽度去。如果您打算添加更多图标，则需要增加宽度。对不起，目前无法想到其他任何东西。 –

扩展侧边栏时缺少背景颜色

回答

相关问题