How to remove resizing content when overflow when is hover? - html

Question

I have problem with overflow in on my website. When mouse is not over the left menu, it look OK, but when I move mouse over the menu and :hover is active, content (menu is a content) is a little smaller. I don't want this effect when :hover is active, menu is a little smaller.
Effect that I want is like on Youtube. If you are logged into your account, and if you pressed menu icon next to Youtube logo, you will get scroll menu. When mouse is not over the menu, nothing happens. But when you move your mouse over the menu, overflow is visible and this not change content size.
In brief:
I have this:
when overflow is active, content is smaller
What I want is this:
when overflow is active, content is NOT smaller
How can I do it ?
Thanks :)

Answer 1

My understanding, though it maybe flawed is that you have to already have the space that the scroll bar will populate there. You didn't give us any code so I had to fabricate it, but this is what I came up with
https://jsfiddle.net/link2twenty/bxz60j4r/
HTML:
<div class="sidebar">
<div class="container">
<div class="profile">
<img src="http://moss-side.yoursquaremile.co.uk/img/default-profile-pic.png" />
</div>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<div class="spacer">
<hr>
</div>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
<hr>
<div class="card">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
<span>Test card data</span>
</div>
</div>
</div>
CSS:
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 400px;
overflow: hidden;
padding-right: 17px;
}
.sidebar:hover {
padding-right: 20px;
overflow-y: auto;
}
.sidebar .container {
width: 400px;
background: #8cc34b;
margin-bottom: -25px;
}
.card {
opacity: .7;
width: 100%;
height: 120px;
background: #8cc34b;
}
.card span {
position: relative;
float: right;
padding-right: 50px;
top: 50%;
}
hr {
margin-left: 120px;
margin-right: 20px;
border-color: darkgreen;
opacity: .7;
}

Answer 2

You can try the following:
.scrollable {
border: 1px solid black;
width: 100px; /* specify the width you like here */
overfow: hidden;
}
.scrollable:hover {
overfow-y: scroll;
}
nav {
border: 1px solid grey;
width: 80px; /* specify the width which is calculated as widthOfScrollable - widthOfScrollbar */
}
.item1, .item2 {
height: 10px;
width: 100%;
}
.item1 { background: red }
.item2 { background: blue }
<div class="scrollable">
<nav>
<li class="item1"></li>
<li class="item2"></li>
</nav>
</div>
Borders and colors are used to show the blocks.
Here you preserve some space for the scrollbar on the right side. Problem here is to preserve exactly the scrollbar size for the current user / browser / OS. They all could have differences in scrollbar width value, so there are two ways for you to go:
Use this function from here Getting scroll bar width using JavaScript to calculate the proper size of the scrollbar
Make the scrollbar margin big enough to cover any case on any operating system