响应式页面中居中横向滚动图片画廊的响应失效问题

我尝试用Flex Grid制作一个带横向滚动的图片画廊页面，要求画廊居中显示，两侧带有侧边栏。为此我用CSS Grid划分了mainleft maincenter mainright三个区域，但页面存在响应式问题：

• 未设置画廊的max-width时，画廊会撑爆整个页面导致溢出
• 将max-width设为100%完全无效
• 设为700px这类固定值虽能解决溢出，但页面失去响应性

原代码如下：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <title>HScroll gallery test</title>         
        <style>
            main {
                background-color:aqua;
                display: grid;
                grid-template-columns: 100px auto 100px;
                grid-template-rows: auto;
                grid-template-areas: 'mainleft maincenter mainright';
            }

            .left {
                grid-area: mainleft;
                background-color:coral;
            }
            .right {
                grid-area: mainright;
                background-color:coral;
            }

            .gallery {
                grid-area: maincenter;
                position: relative;
                max-width: 100%; /* Not working */
                padding: 0 10;
            }

            .gallery_scroller {
                /* snap mandatory on horizontal axis  */
                scroll-snap-type: x mandatory;

                overflow-x: scroll;
                overflow-y: hidden;

                display: flex;
                align-items: center;

                height: 300px;

                /* Enable Safari touch scrolling physics which is needed for scroll snap */
                -webkit-overflow-scrolling: touch;
          }

            .gallery_scroller img {
                /* snap align center */
                scroll-snap-align: center;
                scroll-snap-stop: always;
                margin:22px;
            }
        </style>
    </head>     
    <body>
        <main class="main">
            <div class="left">
            </div>
            <div class="gallery">
                <div class="gallery_scroller">
                    <img src="https://placeimg.com/300/300/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/480/animals/grayscale"/> 
                    <img src="https://placeimg.com/640/480/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/360/animals/grayscale"/> 
                    <img src="https://placeimg.com/2560/960/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/360/animals/grayscale"/> 
                </div>
            </div>
            <div class="right">
            </div>
        </main>
    </body>     
</html>

解决方法 #

问题根源在于CSS Grid的auto列会优先适应子元素的内容宽度，而flex容器内的大尺寸图片会撑破布局。只需以下几处修改：

1. 给.gallery添加overflow: hidden，强制它约束在网格分配的空间内
2. 补全padding的单位（原代码padding: 0 10缺少单位，改为padding: 0 10px）
3. 给图片设置max-height: calc(100% - 44px)，让图片适配滚动容器的高度（抵消上下各22px的margin）
4. （可选）用gap: 22px代替图片的margin，避免flex布局中的margin叠加问题，同时简化代码

修改后的完整代码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <title>HScroll gallery test</title>         
        <style>
            main {
                background-color:aqua;
                display: grid;
                grid-template-columns: 100px auto 100px;
                grid-template-rows: auto;
                grid-template-areas: 'mainleft maincenter mainright';
            }

            .left {
                grid-area: mainleft;
                background-color:coral;
            }
            .right {
                grid-area: mainright;
                background-color:coral;
            }

            .gallery {
                grid-area: maincenter;
                position: relative;
                width: 100%;
                padding: 0 10px; /* 补全单位 */
                overflow: hidden; /* 关键：约束容器边界 */
            }

            .gallery_scroller {
                scroll-snap-type: x mandatory;
                overflow-x: scroll;
                overflow-y: hidden;
                display: flex;
                align-items: center;
                height: 300px;
                -webkit-overflow-scrolling: touch;
                gap: 22px; /* 替代图片margin，更规范 */
                padding: 0 10px; /* 给滚动容器添加左右内边距，避免图片贴边 */
            }

            .gallery_scroller img {
                scroll-snap-align: center;
                scroll-snap-stop: always;
                max-height: calc(100% - 44px); /* 适配容器高度，抵消上下内边距/间隙 */
                object-fit: contain; /* 可选：保持图片比例 */
            }
        </style>
    </head>     
    <body>
        <main class="main">
            <div class="left">
            </div>
            <div class="gallery">
                <div class="gallery_scroller">
                    <img src="https://placeimg.com/300/300/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/480/animals/grayscale"/> 
                    <img src="https://placeimg.com/640/480/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/360/animals/grayscale"/> 
                    <img src="https://placeimg.com/2560/960/animals/grayscale"/> 
                    <img src="https://placeimg.com/360/360/animals/grayscale"/> 
                </div>
            </div>
            <div class="right">
            </div>
        </main>
    </body>     
</html>

内容的提问来源于stack exchange，提问作者fiffens