Breite 100% auf einem Überlauf-Scroll-Element im Flex-Container

Question

Da ein Bild mehr sagt als tausend Worte, zeige ich es zuerst:

In Rot ist mein Flex-Container, in Blau ist ein Element mit einer festen Breite von 50px, in Grün ist ein Abschnitt mit einer Breite von 100%, in Gelb ist eine Liste auch mit einer Breite von 100% und einer Überlaufrolle und schließlich in Lila Sind meine Listenelemente Breite eine feste Breite von 100px.

Ich möchte, dass das grüne Element in meinen roten Flexbehälter passt. Wie kann ich das machen?

Hier ist die Codesandbox, mit der der Screenshot oben erstellt wurde (er wurde in React erstellt, aber das HTML ist in App.jsund das CSS in styles.css):https://codesandbox.io/s/rough-moon-0rsfc?file=/src/styles.css

Answer 1

Sie können overflow: hiddendas grüne Feld hinzufügen , damit es innerhalb der Grenzen des übergeordneten Felds bleibt.

section {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: green;
    overflow-x: hidden;
}

Answer 2

Sie hatten Breiten festgelegt, die ich entfernt habe. Ich sehe auch, dass Sie den divContainer möglicherweise nicht benötigen . Ich habe es auskommentiert, falls Sie sich entscheiden, das blaue Div beizubehalten.

main {
  height: 100px;
  padding: 5px;
  background: red;
  display: flex;
}
/* 
div {
  width: 100%;
  background: blue;
} */

section {
  width: 100%;
  box-sizing: border-box;
  background: green;
  margin: 0;
}

ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  background: yellow;
  display: flex;
  overflow-x: auto;
  list-style-type: none;
}

li {
  flex: 0 0 auto;
  background: purple;
  width: 100px;
  margin: 0 2px;
}