我有一個(gè)容器，一個(gè)側(cè)邊欄，包含圖片中的div。側(cè)邊欄有display: block，底部有一個(gè)flexbox div。側(cè)邊欄會(huì)根據(jù)設(shè)備寬度改變寬度，但內(nèi)部flexbox不會(huì)。溢出繼續(xù)顯示在邊緣上，而不是收縮內(nèi)部div并使p元素進(jìn)入ellips is。這已經(jīng)困擾我好幾天了，因?yàn)槊慨?dāng)我打開(kāi)devconsole時(shí)都會(huì)發(fā)生這種情況。

div#sidebar-pdm {
                background-color: var(--thlv-el-color);
                position: relative;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 20%;
            }

            div#myinfo {
                text-align: left;
                color: var(--text-color);
                max-width: 100%;
                display: flex;
                background-color: var(--tlv-el-color);
                position: absolute;
                bottom: 0px;
                height: 10%;
                align-items: center;
            }

            div#myinfo p {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            div#myinfo img {
                height: 80%;
                vertical-align: middle;
                padding: 5%;
                border-radius: 35%;
            }

            div#myinfo div {
                flex:0 1000;
            }

<div id="myinfo">
                    <img src="{{ user['pfp_url'] }}" onclick="update_status()">
                    <div>
                        <p style="margin:0;">{{ user['username'] }}</p>
                        <p style="margin:0; color: var(--disc-color);">#{{ user['discriminator'] }}</p>
                    </div>
                    <div style="flex:1; text-align:center;">
                        <a href='/' style="color: var(--text-color); text-decoration:none;"><span class="material-symbols-outlined">settings</span></a>
                    </div>
                </div>
            </div>