Float with overflow scroll in css

Question

how to set overflow-x scroll with float left,if set float left to sub div, can't scroll because sub div set within screen.and can't set width to parent div because sub div are dynamic.

.parent div{
    overflow-x:scroll;
    display:Block;
}
.sub div{
    float:left;
}

.parent div{ overflow-x:scroll; display:Block; } .sub div{ float:left; } — Bhavik Hirani
– Bhavik Hirani, Commented Jul 30, 2016 at 13:22

Bhavik Hirani · Accepted Answer · 2020-08-31 06:12:24Z

3

Try to

.parent {
  overflow-x: scroll;
  display: Block;
  white-space: nowrap;
}

.parent .sub {
  /*float:left;*/
  display: inline-block;
  margin-right: 10px;
  border: 1px solid red;
}

<div class="parent">
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
</div>

edited Aug 31, 2020 at 6:12

Bhavik Hirani

2,0264 gold badges32 silver badges50 bronze badges

answered Jul 27, 2016 at 6:44

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Float with overflow scroll in css

1 Answer 1

Try to

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Try to

Comments

Your Answer

Sign up or log in

Post as a guest

Related