让孩子采取父溢出宽度

Question

I have a number of child items inside an explicit width parent eg

 document.querySelector('.parent').scrollTo(100,0)

 .parent { overflow: auto; width: 200px; } .child { font-size: 40px; background-color: blue; white-space: nowrap; }

 <div class='parent'> <div class='child'>asdf asdf adsf asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> </div>

I want the child items background to cover the complete child. However it doesn't extend beyond the initial visible area. You can see what I mean in the image below where I've scrolled the parent horizontally:

Answer 1

try to add display: inline-block; on .child element

Answer 2

change this:

  .parent {
      overflow: auto;
      width: 200px;
      background-color: blue;
    }

check: https://jsfiddle.net/sugandhnikhil/pLbfatgc/

Answer 3

I don't think that this is going to be possible with CSS alone. A background will take up 100% of an element's width, which in this case is 200px, not the scroll width.

Here's a bit of a hack that will get the job done with javascript. You can get the scrollWidth of the parent and then set that to be the width of each child. The forces each child to have the width of the longest child.

This isn't a responsive solution, however. If you resize the text or parent for different screen sizes, you will need to recalculate the width of the children.

 document.querySelector('.parent').scrollTo(100,0); var scrollWidth = document.querySelector('.parent').scrollWidth; var children = document.querySelectorAll('.parent .child'); for (var i = 0; i < children.length; i++) { children[i].style.width = scrollWidth + "px"; }

 .parent { overflow: auto; width: 200px; } .child { font-size: 40px; background-color: blue; white-space: nowrap; }

 <div class='parent'> <div class='child'>asdf asdf adsf asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> </div>

Answer 4

You can hack it by using box-shadow

 document.querySelector('.parent').scrollTo(100,0)

 .parent { overflow: auto; width: 200px; } .child { font-size: 40px; background-color: blue; box-shadow: 200px 0 0 blue; white-space: nowrap; }

 <div class='parent'> <div class='child'>asdf asdf adsf asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> <div class='child'>asdf</div> </div>