[英]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.