Can you avoid having a limit on a background-color of a scrollable container?

Question

I am trying to make it so that half a relatively positioned div has one specific color.

I tried creating another div and place it in position absolute with a width of 50% and placed to the right but the issue I am running into is that since my content is scrollable, whenever I reach the spot where it starts scrolling, the background of that div stops.

Should be mentioned that the reason why I am not simply creating 2 divs each with one color is that I have content placed in the middle as well.

Is there a way around this?

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}

.right-section-background {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: yellow;
}

.content {
  position: absolute;
}

<div class="wrapper">
  <div class="right-section-background"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>

so basically you want to color the background of your element with two colors? — Temani Afif, Feb 03 '20 at 00:57
@TemaniAfif Yes that's exactly what I'm looking to do. Basically, if you look at the snippet, I would like to have the yellow box extend further down to hit the bottom of the container when you scroll and not be cut out. — Felix Bole, Feb 03 '20 at 06:13
@TemaniAfif using `background-image` on `.content` class rather then `.wraper` class will show us the equal distributed background colors, Because `.wraper` has `overflow:scroll` due to which its widths looks less then 50% of container. So am i right? — Awais, Feb 03 '20 at 09:48
Thanks to both of you, using linear-gradient is a smart work around, I hadn't thought of it. This solves it for what I wanted to do ! — Felix Bole, Feb 03 '20 at 10:03
@Awais true but I wasn't focused on accuracy. I wanted the OP to confirm it because I know a duplicate — Temani Afif, Feb 03 '20 at 10:03
@TemaniAfif Oh sorry! My bad, I also missed to check whether its duplicate or not :( — Awais, Feb 03 '20 at 10:04

score 0 · Accepted Answer · answered Feb 03 '20 at 09:06

Welcome to SO!

I used linear-gradient on content to achieve this background-image: linear-gradient(to right, red 50%, yellow 50%);

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  overflow-y: auto;
}


.content {
  position: absolute;
  background-image: linear-gradient(to right, red 50%, yellow 50%);
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis repudiandae officia quasi reiciendis rerum, maiores venia consectetur culpa esse voluptatum ipsam sint velit labore atque libero tempora quas est neque.</p>
  </div>
 </div>

Can you avoid having a limit on a background-color of a scrollable container?

1 Answers1