如何让响应式网站中的滚动图片画廊适配主容器？

我正在搭建个人网站，参考了一款布局模板，结合marquee动画实现方案与flexbox横向图片画廊思路，做出了滚动图片画廊，这是第一次成功实现效果。但目前卡在两个关键问题上：

• marquee容器宽度必须小于横向画廊总宽度才能触发正常滚动，否则会直接把页面横向拉长；
• 给marquee设置固定像素宽度后，网站失去响应式特性，窗口缩小的时候marquee宽度没法同步适配父容器。

排查过程中试过这些操作，但都没解决：

• 不设置固定宽度时，画廊会打乱动画逻辑，图片出现层叠错位；
• 给图片设置固定宽高后，依然无法让marquee适配main容器，fit-content、max-width这类属性都不起作用。

相关代码 #

HTML 代码 #

<body>
    <div id="container">
        <div id="header"></div>
        <div id="headerArea">
            <nav id="navMenu" style="margin-bottom: 10px;"></nav>
            <script src="script.js"></script>
        </div>
        <div id="flex">
            <aside id="leftSidebar">
                <p>sidebar items TBA</p>
            </aside>
            <div class="main">
                <div class="marquee" aria-label="slideshow of example" id="exampleGallery">
                    
                    <div class="marquee__item">
                        <div class="horizontal-gallery">
                            <div class="column"><img src="image1.png" alt="still life" height="250px" width="343.75px"></div>
                            <div class="column"><img src="image2.png" alt="portrait" height="250px" width="366.6666667px"></div>
                            <div class="column"><img src="image3.png" alt="landscape" height="250px" width="220px"></div>
                            <div class="column"><img src="image4.png" alt="abstract" height="250px" width="220px"></div>
                        </div>
                    </div>
                    <div class="marquee__item" aria-hidden="true">
                        <div class="horizontal-gallery">
                            <div class="column"><img src="image1.png" alt="still life" height="250px" width="343.75px"></div>
                            <div class="column"><img src="image2.png" alt="portrait" height="250px" width="366.6666667px"></div>
                            <div class="column"><img src="image3.png" alt="landscape" height="250px" width="220px"></div>
                            <div class="column"><img src="image4.png" alt="abstract" height="250px" width="220px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer" style="margin-top: 10px;"></footer>
        <script src="script.js"></script>
    </div>
</body>

CSS 代码 #

#container {
    max-width: 900px;
    margin: 0 auto;
}


#header {
    width: 100%;
    height: 150px;
}

#navMenu {
    height: 40px;
    width: 100%;
}

#navMenu ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navMenu li {
    padding-top: 10px;
}


#flex {
    display: flex;
}

aside {
    width: 200px;
    padding: 10px;
    font-size: smaller;
}

.main {
    background-color: white;
    flex: 1;
    padding: 20px;
    order: 2;
}


#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

footer {
    width: 100%;
    height: 40px;
    padding: 10px;
}


@media only screen and (max-width: 900px) {
    #flex {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    aside {
        width: 100%;
    }

    .main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navMenu ul {
        flex-wrap: wrap;
    }

}


.horizontal-gallery {
    width: 1210px;
    white-space: nowrap;
}

.column {
display: inline-flex;
    padding: 10px 5px 10px 5px;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}


.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    max-width: 650px;
}

.marquee__item {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: marquee-content;
    animation-timing-function: linear;
}

.marquee:hover .marquee__item {
    animation-play-state: paused;
}

@keyframes marquee-content {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}


#container {
    display: grid;
}

#leftSidebar {
    position: sticky;
    top: 0;
    height: fit-content;
    margin: 10px;
}

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