弹窗内水平滚动容器无法正常显示，独立使用却正常的问题求助

我在页面的弹窗（popup window）中嵌入水平滚动容器时，弹窗出现变形，仅显示滚动条，容器内容无法正常展示。该滚动容器独立使用时功能完全正常，试过多种方案都没解决，求帮助。

弹窗内异常状态 #

独立使用正常状态 #

弹窗的HTML代码 #

<div id="formula-popup" class="popup-window">
<div> 
    <a onclick="closeFormulaWindow()" title="Close" class="close">X</a>
    <span id="ftitle" class="title1"></span>
    <form method="post" id="formulaform" name="edit">
        <span>Current Formula</span>
        <p id="current-formula" class="formula">Existing formula</p>
        <input id="id-passer" type="hidden" name="formula-id" value="">
        <!--sort out horizontal scrollbar from bookmarks here later-->
        <input onclick="refreshWindow()" name="edit-formula" type="submit" value="Confirm">
    </form>
    <div class="h-scrollbar">
        <section class="h-scrollbar-container">
            <div class="outer-wrapper">
                <div class="inner-wrapper">
                    <div class="pseudo-item"></div>
                    <div class="pseudo-item"></div>
                    <div class="pseudo-item"></div>
                    <div class="pseudo-item"></div>
                    <div class="pseudo-item"></div>
                    <div class="pseudo-item"></div>
                </div>
            </div>
            <div class="pseudo-track"></div>
        </section>
    </div>
</div>

对应的CSS代码 #

.scrollbar-container {
    display: flex;
    flex-direction: row;
}

.h-scrollbar {
    display: flex;
    max-width: 30vw;
    padding: 0px 10px;
    height: 20vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;  
    flex-shrink: 0;
}

.h-scrollbar-container {
    width: 100%;
}

.outer-wrapper {
    max-width: 100vw;
    overflow-x: scroll;
    position: relative;
    scrollbar-color: #d5ac68 #f1db9d;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.pseudo-track {
    background-color: #f1db9d;
    height: 2px;
    width: 100%;
    position: relative;
    top: -3px;
    z-index: -10;
}

.outer-wrapper::-webkit-scrollbar {
    height: 5px;
}

.outer-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

.outer-wrapper::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: #d5ac68;
}

.outer-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #f1db9d;
}

.outer-wrapper::-webkit-scrollbar:vertical {
    display: none;
}

.inner-wrapper {
    display: flex;
    padding-bottom: 10px;
}

.pseudo-item {
    height: 30px;
    width: 80px;
    margin-right: 15px;
    flex-shrink: 0;
    background-color: gray;
}

.pseudo-item:nth-of-type(2n) {
    background-color: lightgray;
}

.popup-window {
    position: fixed;
    font-family: Arial, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
}

.popup-window div {
    width: 40vw;
    height: 30vw;
    position: relative;
    margin: 10% auto 30%;
    border-radius: 10px;
    background: #213B54;
    padding-top: 2vh;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: 2vh;
    display: flex;
    flex-direction: column;
}

.close {
    font: Arial, sans-serif;
    background: #067A9F;
    color: #B5E5E7;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
}

.popup-window div .title1 {
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 36px;
    color: #EE6802;
    align-self: center;
}

.popup-window form input[type=submit]:hover {
    opacity: 0.8;
}

.popup-window form span {
    color: #EE6802;
    font-size: 22px;
}

.popup-window form {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

.popup-window form span, input {
    width: 100%;
}

.popup-window form input[type=submit] {
    width: 20%;
    background-color: #067A9F;
    color: #213B54;
    padding: 14px 0;
    cursor: pointer;
    border: none;
}

问题原因与修复方案 #

问题出在两处CSS设置冲突：

1. .outer-wrapper的max-width:100vw：弹窗是固定宽度的容器，100vw会让滚动容器宽度超出弹窗范围，加上内部flex布局挤压，导致内容被隐藏。
2. .h-scrollbar的max-width:30vw：该宽度限制和弹窗40vw的宽度不匹配，且弹窗的flex容器未给滚动容器预留足够空间。

修改步骤：

• 将.outer-wrapper的max-width:100vw改为width:100%，让滚动容器适配父级弹窗宽度：

.outer-wrapper {
    width: 100%; /* 替换原max-width:100vw */
    overflow-x: scroll;
    position: relative;
    scrollbar-color: #d5ac68 #f1db9d;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

• 调整.h-scrollbar的宽度设置，去掉max-width:30vw改为width:100%，让它占满弹窗内部可用宽度：

.h-scrollbar {
    display: flex;
    width: 100%; /* 替换原max-width:30vw */
    padding: 0px 10px;
    height: 20vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;  
    flex-shrink: 0;
}

• 给.h-scrollbar添加flex-grow:1，让它在弹窗的flex布局中获取足够垂直空间：

.h-scrollbar {
    flex-grow: 1; /* 新增属性 */
    display: flex;
    width: 100%;
    padding: 0px 10px;
    height: 20vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;  
    flex-shrink: 0;
}

修改后，滚动容器就能在弹窗内正常展示内容并保持水平滚动功能。

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