Missing background color when expanding sidebar

Question

I would like to create a side menu which is a narrow right sidebar with icons in it in a column. There could be more icons/buttons then the available vertical space and what I would like to achieve is to show those icons on hovering over the sidebar and the leftover icons would be expanded to the Left! Please run the snippet for a demo. My problem is that the icons which doesn't have enough space on the sidebar are wrapped to the left into a new column because of the flex rules I applied and these are right, but those elements wont have the sidebar's background which is bad. I hope my problem is clear. Thanks

.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>

score 0 · Answer 1 · answered Jul 24 '17 at 13:31

The sidebar needs width as it overflows over the content. Without the width, the background won't be applied to the part that overflows over the content when hovered.

Here's the updated code: https://jsfiddle.net/Lm6ey2sa/

Hope that helps!

.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>

Hey, thanks @JayShah, the only concern with this is that I won't know how much column the spare icons will take. In this example the container wrapped into 2 columns but if I will have more icons it might wrap into 3 columns etc.. So at least I need to set the width somehow automatically. But according to this quite similar issue https://stackoverflow.com/questions/23408539/how-can-i-make-a-displayflex-container-expand-horizontally-with-its-wrapped-con there's no automatic way to do this. — Attila Kling, Jul 24 '17 at 13:43
Yes, I thought about the automatic width and there didn't seem to be a way to make that happen. That's why I went with the manual width. If you plan to add more icons, the width needs to be increased. Sorry, can't think of anything else at the moment. — Jay Shah, Jul 24 '17 at 14:58

Missing background color when expanding sidebar

1 Answers1