Bhavik Hirani Bhavik Hirani - 4 months ago 9
CSS Question

Float with overflow scroll in css

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;
}

Answer

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>

Comments