Flex's align-items breaking horizontal scrolling

2 days ago 7

ARTICLE AD BOX

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html, body { height: 100%; width: 100%; margin: 0; } .container { display: flex; flex-direction: column; align-items: center; } .row { display: flex; } .cell { min-width: 18px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="cell">0</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1000</div> </div> <div class="row"> <div class="cell">0</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1000</div> </div> <div class="row"> <div class="cell">0</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1000</div> </div> <div class="row"> <div class="cell">0</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1</div> <div class="cell">1000</div> </div> </div> </body> </html>

On small screens I cannot scroll to the start of the row. Can you please help me fix this issue and keep the centering of the rows?