Absolutely Positioned Div on Right Causing Scrollbar When the Left Doesn'T

Off screen absolute positioned Div causing horizontal scrolling

I have the same issue in my Safari(Version 12.1.1) when I set my div to position: absolute and right: -15rem;

To fix it, I added a to include all elements within and have the CSS like this:

.wrapper {
  position: relative;
  overflow-x: hidden;
}

Hope this help.

Position:absolute causes horizontal scrollbar

Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.

Here's a working example: http://jsfiddle.net/8UkQA/1/

Absolutely positioned element is relative to scrollbar on parent element (with overflow auto) even though no scrollbar is visible

This appears to be a Chrome bug (and haven't found yet if it been filed already).

---

Workaround 1: Since flex row item defaults to vertically stretch, give the flex-item height: 100%

Fiddle demo

Stack snippet

.flex {

  display: flex;

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

}

.flex-item {

  flex: 1 0 0px;

  position: relative;

  height: 100%;

}

.container {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  background-color: cyan;

  overflow-y: auto;

}

.top {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 45px;

  background-color: red;

}

<div class="flex">

  <div class="flex-item">

    <div class="container">

      <div class="top"></div>

    </div>

  </div>

</div>

How to prevent an absolutely positioned element to affect the scrollbar?

This seems a bit of a janky approach and has a small caveat, but it's pure CSS/ no HTML structure modifications.

Essentially, I make the .container the main parent instead of trying to work from a lower level (.autosuggest). Step by step:

• Move position: relative up to .container
• Make the .autosuggest positioned absolutely (top / left default to 0px).
  
  
  • Give it a higher z-index so it's always on top
• make .content positioned absolutely all four sides 0px so it's same size as .container
• Move the overflow scrollbar to the .content div
• (here's the caveat) Set the top padding of .content to the height of .input + the actually desired padding. Otherwise the .content is behind the input element.

And you end up with this:

    .container {

      height: 100px;

      width: 300px;

      margin-top: 50px;

      border: 1px solid black;

      position: relative;

    }

    .autosuggest {

      width: 250px;

      position: absolute;

      z-index: 50;

    }

    .input {

      font-size: 16px;

      width: 230px;

      padding: 5px 10px;

      border: 0;

      background-color: #FFEBBF;

    }

    .autosuggest .input:focus ~ .suggestions{

      display: block;

    }

    .suggestions {

      display: none;

      list-style-type: none;

      margin: 0;

      padding: 5px 10px;

      width: 230px;

      background-color: #85DDFF;

    }

    .content {

      overflow-y: auto;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      padding: 28px 10px 5px;

    }

<div class="container">

  <div class="autosuggest">

    <input class="input" type="text" value="input">

    <ul class="suggestions">

      <li>suggestion 1</li>

      <li>suggestion 2</li>

      <li>suggestion 3</li>

      <li>suggestion 4</li>

      <li>suggestion 5</li>

      <li>suggestion 6</li>

      <li>suggestion 7</li>

      <li>suggestion 8</li>

      <li>suggestion 9</li>

    </ul>

  </div>

  <div class="content">

    content content<br >content content content content content<br ><br ><br ><br ><br ><br >content content content

  </div>

</div>

Why does position absolute make page to overflow?

I think I know where this question comes from. You must be confused by people using (negative) absolute positioning on the LEFT side of the screen when they want an element to be off screen WITHOUT horizontal scrollbars. This is a common technique for sliders, menu's and modals.

The thing is that a negative LEFT allignment does NOT show overflow on the body, while a negative right allignment does. Not very logical... I know.

To illustrate this I created a pen with the absolute element on the left: left: -100px; http://codepen.io/anon/pen/vGRxdJ and a pen with the absolute element on the right: right: -100px; http://codepen.io/anon/pen/jqzBZd.

I hope this takes away your confusion.

As to why this happens: I have always understood that the top left corner of the screen is x:0, y:0: the origin of a coordinate system consisting only of positive values (which is mirrored horizontally in the RTL case). Negative values in this coordinate system are 'off-canvas' and thus need no scrollbar, while 'on-canvas' elements do. In other words: on-canvas elements will enlarge your page and make your view automatically scrollable (unless instructed otherwise), while off-canvas elements will not.

Position Absolute + Scrolling

You need to wrap the text in a div element and include the absolutely positioned element inside of it.

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

Setting the inner div's position to relative makes the absolutely position elements inside of it base their position and height on it rather than on the .container div, which has a fixed height. Without the inner, relatively positioned div, the .full-height div will always calculate its dimensions and position based on .container.

* {

  box-sizing: border-box;

}

.container {

  position: relative;

  border: solid 1px red;

  height: 256px;

  width: 256px;

  overflow: auto;

  float: left;

  margin-right: 16px;

}

.inner {

  position: relative;

  height: auto;

}

.full-height {

  position: absolute;

  top: 0;

  left: 0;

  right: 128px;

  bottom: 0;

  height: 100%;

  background: blue;

}

<div class="container">

  <div class="full-height">

  </div>

</div>

<div class="container">

  <div class="inner">

    <div class="full-height">

    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus

    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio

    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate

    quidem.

  </div>

</div>

---

Related Topics