1

I have a Flex container, with overflow-x:scroll but the content gets clipped.

Can someone please explain why even with scroll content gets clipped?

And if i move overflow-x:scroll to .row and add flex-shrink:0 to child then the right padding of Container .ctr gets clipped.

.ctr{
  display: flex;
  justify-content: center;  
}

.row{
  display:flex;
  padding:20px 20px;
  overflow-x: scroll
}

Why .ctr padding left works, but padding right doesnt ?

Please test in small viewports <600px

.ctr{
  display: flex;
  justify-content: center;
  overflow-x: scroll
}

.row{
  display:flex;
  padding:20px 20px;
}

.row .child {
  margin-right:20px;
}

.row .child:last-child{
  margin-right:0;
}

.child{
  min-width:0;
  width:600px;
  height:100px;
  background: red;  
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="ctr">
    <div class="row">
      <div class="child">

      </div>
      <div class="child">

      </div>
      <div class="child">

      </div>
    </div>


  </div>
</body>

</html>
ROOT
  • 11,363
  • 5
  • 30
  • 45
Mahaveer
  • 435
  • 4
  • 14
  • why `justify-content: center;` in `.ctr` and you only have one child ? – Rainbow Mar 19 '20 at 19:13
  • so that in large viewport its child `.row` is centered. – Mahaveer Mar 19 '20 at 19:17
  • `.row` is the only child in a flex container, it will always take the whole width of it's parent no matter the viewport – Rainbow Mar 19 '20 at 19:17
  • but it doesn't stay at the center, try at > 2000px width and you'll see the difference – Mahaveer Mar 19 '20 at 19:44
  • Oh right, well `justify-content: center;` is the issue you can replace it with `margin: 0 auto;` on `.row` which will center it on humongous screens and prevent the content from being clipped [related](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container/33455342#33455342) – Rainbow Mar 19 '20 at 21:21

0 Answers0