展开侧边栏时缺少背景颜色答案

【问题标题】：Missing background color when expanding sidebar展开侧边栏时缺少背景颜色
【发布时间】：2017-12-30 02:20:40
【问题描述】：

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

【问题讨论】：

标签： html css user-interface flexbox user-experience

【解决方案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>

【讨论】：

嘿，谢谢@JayShah，唯一担心的是我不知道备用图标会占用多少列。在此示例中，容器包装成 2 列，但如果我将有更多图标，它可能会包装成 3 列等。所以至少我需要以某种方式自动设置宽度。但是根据这个非常相似的问题stackoverflow.com/questions/23408539/…，没有自动的方法可以做到这一点。
是的，我考虑过自动宽度，但似乎没有办法做到这一点。这就是我选择手动宽度的原因。如果您打算添加更多图标，则需要增加宽度。抱歉，暂时想不到别的了。