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
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;
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.