I have the fallowing property:
div{width:300px;}
and everything is fine because there is a vertical scroll(with a width of 17px).
but when I have the same div in a place where there is no vertical scroll there is a void (cause there is no 17px vertical scrollbar of course)
My question is: what is the correct way to approach this problem?
something like this logic maybe?
if !scrollbarY
then div.width=div.width + scrollbarY
else div.width
or maybe placing a verticalscroll not having the need?
If you set div {overflow: scroll;}, scrollbar sections will show whether a scrollbar is needed or not (or void as you say). If you set div {overflow: auto;}, it will only show the scrollbar sections when necessary. Run the code snippet to see an example of both.
.one,
.two,
.three {
width:300px;
height: 50px;
display: block;
margin-bottom: 3rem;
border: 1px solid pink
}
.one {
overflow: scroll
}
.two,
.three {
overflow: auto
}<div class="one">
jlnka sdflj knasd
</div>
<div class="two">
jlnkasdf ljknas dflkjn.
</div>
<div class="three">
jlnkasdf ljknas dflkjn asdflkj nasdflk jnasdfl kjnasdf lkjnasd flkjnas dflkjnas dflkjnas dflkjnas dfkljnas dfkljnas dlfkjnas
</div>