I'm looking to incorporate a scrolling image gallery into a flexbox layout so that as the browser page size changes, the gallery will scale according to the flex-grow index. My goal is to ensure all images remain accessible via a scrollbar without using absolute units. Despite attempting various methods recommended on forums and websites, I have been unsuccessful in getting the gallery to function within my flexbox layout. Any suggestions would be greatly appreciated.
Example1: The desired behavior of the image gallery when the browser page size is smaller than the displayed images:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background-color: dimgray;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.gallery {
flex: 1 1 50%;
white-space: nowrap;
overflow: scroll;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://via.placeholder.com/100x100" alt="Tile1">
<img src="https://via.placeholder.com/100x100" alt="Tile2">
<img src="https://via.placeholder.com/100x100" alt="Tile3">
<img src="https://via.placeholder.com/100x100" alt="Tile4">
...
</div>
</body>
</html>
Example2: Flexbox layout where the image gallery should be integrated:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
background-color: dimgray;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
/************************/
.column {
display: flex;
flex-flow: column nowrap;
border: 1px solid black;
padding: 10px;
}
.column:nth-child(1) {
flex: 4 0 40%;
}
.column:nth-child(2) {
flex: 3 0 30%;
}
/************************/
.row {
display: flex;
flex-direction: row;
flex-flow: row nowrap;
}
.row:nth-child(1) {
flex: 1;
}
/************************/
.sub-row {
border-bottom: 1px solid black;
padding: 5px 0;
color: white;
}
.sub-row:last-child {
border-bottom: none;
}
/************************/
#row-middle-col-left1,
#row-middle-col-left2 {
flex-grow: 4;
}
#row-middle-col-right1 {
flex-grow: 10;
}
#row-middle-col-right2 {
/*max-width: 800px;*/
}
/************************/
.gallery {
flex: 1 1 50%;
white-space: nowrap;
overflow-x: scroll;
min-width: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row" id="row-middle">
<div class="column" id="row-middle-col-middle">
<div class="sub-row" id="row-middle-col-left1">M1</div>
<div class="sub-row" id="row-middle-col-left2">M2</div>
</div>
<div class="column" id="row-middle-col-right">
<div class="sub-row" id="row-middle-col-right1">R1</div>
<div class="sub-row" id="row-middle-col-right2">R2
<div class="gallery">
<img src="https://via.placeholder.com/100x100" alt="Image1">
<img src="https://via.placeholder.com/100x100" alt="Image2">
<img src="https://via.placeholder.com/100x100" alt="Image3">
<img src="https://via.placeholder.com/100x100" alt="Image4">
...
</div>
</div>
</div>
</div>
</div>
</body>
</html>