擴展側邊欄時缺少背景顏色

我想創建一個側邊菜單，它是一個狹窄的右邊欄，其中的圖標在一列中。可以有更多的圖標/按鈕，然後是可用的垂直空間，我想要實現的是在側欄上懸停顯示這些圖標，剩下的圖標將展開到左側！請運行演示片段。我的問題是，側欄上沒有足夠空間的圖標被左側包裝到一個新列中，因爲我應用了這些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沒有自動的方式來做這個。 –

是的，我想到了自動寬度，似乎沒有辦法做到這一點。這就是爲什麼我用手動寬度去。如果您打算添加更多圖標，則需要增加寬度。對不起，目前無法想到其他任何東西。 –

擴展側邊欄時缺少背景顏色

回答

相關問題