Wie lege ich die maximale Breite von Elementen innerhalb eines überlaufenden übergeordneten Elements fest? ⇐ CSS

[Guest]

Ich habe zwei Elemente im Container, deren maximale Breite auf 250 Pixel eingestellt ist. Diese beiden Elemente sind dynamisch und in meinem Beispiel hat das zweite Element eine Breite von 500 Pixel (so eingestellt, dass das Problem angezeigt wird) und das erste muss auf 500 Pixel erweitert werden wegen dieses zweiten Elements. Ist das in CSS möglich?

Code: Select all

.container {
display: flex;
flex-direction: column;
max-width: 200px;
background-color: orange;
overflow: auto;
}

.test {
height: 100px;
}

.test-one {
background-color: pink;
}

.test-two {
width: 500px;
background-color: red;
}

Code: Select all

Test one
Test two