我試圖在#header div下創建一個水平滾動的flex #main-container。# main-container的子元素是。應該垂直填充容器剩余空間的框元素。這些元素中的每一個都有更多的UI嵌套元素，最終包含一個customs svg元素。

我設法用下面的代碼做了我需要做的事情，除了水平調整。box元素來適應嵌套的svg元素，這實際上是一個完美的圓。現在，隨著瀏覽器視口大小的增長，svg元素也在增長，并向右側溢出(隱藏)。我希望svg元素增加兩者的寬度。盒子還是。直到svg元素垂直填充內部可用的垂直空間。svg容器，然后停止增加。方框寬度。我不知道為了達到這個目標我還缺少什么。

另外，像這樣嵌套flex盒子被認為是好的實踐嗎？對于本質上簡單的布局來說，這似乎過于復雜了。除了上面描述的問題，它看起來完全符合我的需要(我已經測試了三種現代瀏覽器)，但我不知道這是不是一種非常復雜的方法。

#app {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#header {
    margin: 0;
    padding: 1em 0;
}

/* Container horizontal flex box:
renders .box elements horizontally with scroll on overflow */
.main-container {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    align-items: center;
    justify-content: center;
    column-gap: 1em;
    padding: 1em;
    /* Vertically fill remaining space in #app */
    flex-grow: 1;
}

/* Vertical flex box:
fill available vertical space in #container */
.box {
    max-height: 50em;
    height: 100%;
    display: flex;
    flex-shrink: 0;
}

/* Extra wrapper allows round borders for boxes with "overflow: hidden"
while still allowing "overflow-x: scroll" in #container */
.box-container {
    overflow: hidden;
    background-color: var(--color-04);
    border: 1px solid var(--color-00);
    border-radius: 3em;
    /* Vertical flex container 
    allows pushing ".bottom-ui" to the bottom */
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    /* Needed for absolute positioning of close button inside .box */
    position: relative;
}

.top-ui {
    padding-bottom: 1em;
    /* Push .bottom-ui down, flush with .box-container bottom */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.svg-container {
    /* Push rest of UI to the bottom */
    flex-grow: 1;
    /*
    adding this scales down the svg element to fit the main .box width
    instead of enlarging the box:

    display: flex;
    flex-direction: column;
    */
}

svg {
    height: 100%;
}

<div id='app'>
    <div id='header'>
        <p>some text</p>
    </div>
    <div class='container'>
        <div class='box'>
            <div class='box-container'>
                <div class='top-ui'>
                    <div class='svg-container'>
                        <svg>
                    </div>
                    <!--- more stuff here --->
                </div>
                <div class='bottom-ui'>
                    <!--- more stuff here --->
                </div>
            </div>
        </div>
    </div>
</div>