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

Question

我想创建一个侧边菜单，它是一个窄的右侧边栏，其中的图标位于一列中。可能会有更多的图标/按钮然后可用的垂直空间，我想要实现的是在悬停在侧边栏上时显示这些图标，剩余的图标将扩展到左侧!请运行代码片段进行演示。我的问题是，由于我应用了 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>

Answer 1

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

这是更新后的代码: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>