flex 容器中溢出滚动元素的宽度为 100%

Question

Because a picture is worth a thousand words, I'll show it first:

In red is my flex container, in blue is an element with a fixed width of 50px, in green is a section with a 100% width, in yellow is a list also with a 100% width and an overflow scroll, and finally in purple are my list elements width a fixed width of 100px.

I want the green element to fit in my red flex container. How can I do that?

Here's the codesandbox used to make the screenshot above (it's made in React but the html is in App.js and the css in styles.css ): https://codesandbox.io/s/rough-moon-0rsfc?file=/src/styles.css

Answer 1

You can add overflow: hidden to the green box to make it stay in the bounds of it's parent.

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

Answer 2

You had set widths that I removed. Also, I see that You may not need the div container. I left it commented out in case you decide you want to keep the blue div.

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;
}