I am currently developing an image gallery with multiple sections that contain various images. My goal is to arrange each section of images in a single row, allowing horizontal scrolling similar to Netflix's layout. However, I'm facing challenges with getting the container to overflow horizontally and it instead wraps to a second row.
I've attempted using:
- white-space: nowrap
- overflow-x: auto;
- overflow-y: hidden;
I also experimented with containing div rotation for vertical scrolling and then reverting for child div display.
The closest I've come to achieving the desired effect was with the second example, but I struggle to get the wrapper width correct to span the entire row.
Please see examples below:
First Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>list testing</title>
<style>
// CSS styles here
</style>
</head>
<body>
// HTML code here
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en>
// Remaining HTML code goes here
In the second example, I managed to achieve the desired scrolling behavior but struggled with setting the correct width. Any assistance or suggestions would be greatly appreciated.