как растянуть div во всю ширину контейнера c overflow-x: scroll

Question

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

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

http://jsfiddle.net/2ghb3ahc/12/

P.s Знаю, что такой вопрос и подобные вопросы уже задавали, но решения я не нашел

Answer 1

В принципе сработает такое, хотя это и не то, о чём говорится в вопросе:

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

.p2 {
  position: sticky;
  left: 0;
}

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

Answer 2

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

.p1 {
  display: grid;
  align-content: start;
}

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

Answer 3

p2 добавить width такую как у родителя (в нашем случае 300px), и добавить для p2 position fixed

БЛОГ НА HUSL

как растянуть div во всю ширину контейнера c overflow-x: scroll

Ответы (3 шт):