1

.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 Знаю, что такой вопрос и подобные вопросы уже задавали, но решения я не нашел

4
  • не представляю если чесно зачем вам ето но можно задать ширину div { width: max-content; }
    – GGO
    17 фев 2022 в 17:55
  • мой заказчик учиться в айти школе, и там такое задание). width: max-content; не сработало 17 фев 2022 в 18:13
  • странно, запустил, вроде работает, может мы не так поняли ваш вопрос
    – GGO
    17 фев 2022 в 18:46
  • Он должен визуально прокручиваться при скролле или это просто визуальный элемент?
    – Qwertiy
    17 фев 2022 в 23:51

3 ответа 3

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>

1

.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>

0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.