how to stretch a full-width div in an overflow-x div c: scroll

html:

<div class="p1"> <p>204204204200420424204204204420420420420420420000420</p> <div class="p2"></div> </div>

css:

 .p1 {width:300px; height: 200px; border: 1px solid #000; overflow-x: scroll;} .p2 {height: 30px; background: #902457; display: block;}

the same here: http://jsfiddle.net/2ghb3ahc/12/

in the end, it can be seen that the crimson block does not stretch to the full width inside the div, but takes the width of the parent, how to stretch it to the entire width? without resorting to wight with px values, since the length of the text will vary, and wight 100% does not help

  • <div class = "p2"> should also move along with the text .p2 {position: fixed;} is not an option in my case - Lech
  • via css I didn’t find how to do it, the current through jquery, suddenly someone will need document.querySelector (". p2"). style.width = document.querySelector (". p1"). scrollWidth + "px"; - Lech

1 answer 1

you can try with the caste ...:

 .p1 { width: 300px; height: 200px; border: 1px solid #000; overflow-x: scroll; } .p2 { position:fixed; height: 30px; background: #902457; width:300px; } 
 <div class="p1"> <p>204204204200420424204204204420420420420420420000420 </p> <div class="p2"></div> </div>

  • not that a bit, div also has to move along with the text, there will also be infa in it, it’s not just for color * just simplified the code to a minimum for quick understanding - Lech
  • @ What effect do you want to achieve? Is the test initially set or dynamic? - C.Raf.T