Basj Basj - 13 days ago 4
CSS Question

Scrollbar overwrites a div

I have an issue when a scrollbar appears on a div, thanks to

overflow-y: auto;
.

When the right div
#bb
has a scrollbar (add more lines in it to see it happen), the scrollbar is over the
#help
div. How to make this
#help
div move on the left so that it's not overwritten by the scrollbar?




html,
body {
overflow: hidden;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#aa {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#bb {
position: fixed;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: blue;
overflow-x: hidden;
overflow-y: auto;
}
#help {
position: fixed;
top: 0;
right: 0;
background-color: green;
}

<div id="aa" contenteditable>a
<br>few
<br>lines
</div>
<div id="bb" contenteditable>please add more
<br>lines here to make
<br>the scrollbar appear!</div>
<div id="help">?</div>




Answer

I've changed a couple of things, I've used flexbox to get them next to each other, I've made both halves position relative. And I've put the ? inside #bb and set it to position absolute.

html,
body {
  overflow: hidden;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.flex-container {
  display: flex;
  width: 100vw;
  height: 100vh
}
#aa {
  position: relative;
  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#bb {
  position: relative;
  flex: 1;
  height: 100%;
  background-color: blue;
  overflow-x: hidden;
  overflow-y: scroll;/* Just so the bar is there */
}
#help {
  position: absolute;
  top: 0;
  right: 0;
  background-color: green;
}
<div class="flex-container">
  <div id="aa" contenteditable>a
    <br>few
    <br>lines
  </div>
  <div id="bb" contenteditable>
    I've made it always
    <br>so the scrollbar is
    <br>there but you can
    <br>change it back to auto
    <div id="help">?</div>
  </div>
</div>

Hope this is helpful.

EDIT

I've given it some thought. I think this might be a better way to do it.

html,
body {
  min-height: 100vh;
}
* {
  margin: 0;
  padding: 0;
}
#aa {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
}
#bb {
  margin-left: 50%;
  min-height: 100vh;
  background-color: blue;
}
#help {
  position: fixed;
  top: 0;
  right: 0;
  background-color: green;
}
<div id="aa" contenteditable>a
  <br>few
  <br>lines
</div>
<div id="bb" contenteditable>please add more
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>lines here to make
  <br>the scrollbar appear!
</div>
<div id="help">?</div>

This uses the scrolling of the body to scroll through the right column (the left column is fixed in place). This means right:0; will take the scroll bar into account.