0

I want to size an overlay element to fill a scrollable parent element, without changing the parent element's attributes like display or position.


    #scrollable {
      width: 300px;
      height: 100px;
      overflow: auto;
      background-color: rgba(0, 0, 255, 0.1);
    }

    #overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 0, 0, 0.1);
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
    }

    <div id="scrollable">
      <div contenteditable=true>
        <p>Editable with parent with scrolling</p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
      </div>
      <div id="overlay">
      </div>
    </div>

https://jsfiddle.net/3d1npx0L/

This is similar to How to overlay one div over another div

except I want to achieve this without changing the parent/contain CSS.

James
  • 2,742
  • 1
  • 20
  • 43
  • 1
    You can't. You need to set the parent to either `display: flex;` or `position: relative` (which is what enables the use of `position: absolute` in a child or descendant element). – Dai Nov 04 '20 at 21:58
  • 1
    Also, `contenteditable` is a nightmare to work with - are you absolutely certain you want to use it? – Dai Nov 04 '20 at 21:58

2 Answers2

1

I don’t really get what is your goal, but try to add position:relative to your #scrollable. It is the only case when child div will have position: absolute enabled.

Pinncik
  • 321
  • 3
  • 14
1

I don't think that's possible. you will need to give the parent position:relative and give the overlay top:0, left:0, right: and bottom:0 here is a sample

#scrollable {
      width: 300px;
      height: 100px;
      overflow: auto;
      background-color: rgba(0, 0, 255, 0.1);
      position:relative;
    }

    #overlay {
     
      background-color: rgba(255, 0, 0, 0.1);
      position: absolute;
      left: 0;
      top: 0;
      bottom:0;
      right:0;
      pointer-events: none;
    }

update: I think you need to wrap everything in a div element.

<div class="scroll-holder">

  <div id="scrollable">

    <div contenteditable=true>
      <p>Editable with parent with scrolling</p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      
    </div>

  </div>

  <div id="overlay">
  </div>

</div>

And the styles to this

.scroll-holder {
  position: relative;
  width: 300px;
  height: 100px;
}

#scrollable {

  height: 100px;
  overflow: auto;
  background-color: rgba(0, 0, 255, 0.1);

}

#overlay {

  background-color: rgba(255, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
 
}
ibrahim s
  • 297
  • 1
  • 7
  • I tested this in the JSFiddle, and the red color stops at the fold of the scroll. If I scroll down the overlay (red) doesn't continue, but the contenteditable (blue) does. – James Nov 04 '20 at 22:13
  • you may need to wrap everything in another div parent element – ibrahim s Nov 04 '20 at 22:43