Make child elements overflow in parent container
Question
How do I make child elements overflow if their width is greater than parent's width?
As you can see, below in the code the .container width is 600px while every div inside has width 200px, so the total width is 1200px. Why aren't the divs inside .container overflow?
* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 600px; padding: 1rem; display: flex; overflow-x: auto; border: 1px solid red; } .container div { width: 200px; height: 50px; border: 1px solid black; display: flex; justify-content: center; align-items: center; }
<body> <div class="container"> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> </div> </body>
2 answers
solution1
0 ACCPTED 2022-06-23 16:46:38
Don't use width .
Use flex properties on the children and max-width on the container.
* { margin: 0; padding: 0; box-sizing: border-box; } .container { max-width: 600px; padding: 1rem; display: flex; overflow-x: auto; border: 1px solid red; } .container div { flex: 0 0 200px; height: 50px; border: 1px solid black; display: flex; justify-content: center; align-items: center; }
<body> <div class="container"> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> </div> </body>
solution2
0 2022-06-23 17:01:26
Use min-width on child divs instead of width .
* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 600px; padding: 1rem; display: flex; overflow-x: auto; border: 1px solid red; } .container div { min-width: 200px; height: 50px; border: 1px solid black; display: flex; justify-content: center; align-items: center; }
<body> <div class="container"> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> <div>child</div> </div> </body>
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.
Related Question
Can I set the parent container as overflow: hidden but only specific child elements behave as if the parent is overflow: visible?
Is this possible to make the child dom element to have visible overflow when parent container element has overflow scroll?
How to make child elements overflow horizontally if the parent's overflow-x is set to hidden
UL elements being overflow outside of parent container
Make elements sticky to their parent container
How to make a child elements shadow show above parent that has overflow: hidden?
Make parent container the height of a hovered child container
Make child div overflow inside parent div?
Make a child take parent overflow width
Make child visible outside an overflow: scroll parent
Related Tags