[英]Make child elements overflow in parent container
如果子元素的宽度大于父元素的宽度，如何使子元素溢出？
正如你所看到的，在下面的代码中， .container的宽度是 600px，而里面的每个 div 的宽度都是 200px，所以总宽度是 1200px。 为什么.container中的 div 没有溢出？
* { 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>
不要使用width 。
在子节点上使用 flex 属性，在容器上使用max-width 。
* { 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>
在子 div 上使用min-width而不是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>
我可以将父容器设置为溢出：隐藏但只有特定的子元素表现得好像父容器是溢出的：可见吗？
[英]Can I set the parent container as overflow: hidden but only specific child elements behave as if the parent is overflow: visible?
当父容器元素具有溢出滚动时，这是否可以使子 dom 元素具有可见的溢出？
[英]Is this possible to make the child dom element to have visible overflow when parent container element has overflow scroll?
如果父元素的overflow-x设置为隐藏，如何让子元素水平溢出
[英]How to make child elements overflow horizontally if the parent's overflow-x is set to hidden
如何使子元素阴影显示在已溢出的父对象上方：隐藏？
[英]How to make a child elements shadow show above parent that has overflow: hidden?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.