表格中Flex子元素溢出父元素

通过设置-flex-wrap: wrap 以及 display: flex 和 table-layout: fixed 属性来解决。

示例代码：

HTML：

<table> <tr> <td> <div class="container"> <div class="child"></div> </div> </td> <td></td> <td></td> </tr> </table>

CSS：

table { border-collapse: collapse; table-layout: fixed; width: 100%; } td { padding: 0; } .container { display: flex; flex-wrap: wrap; align-items: center; /* 让子元素垂直居中 */ height: 100%; } .child { height: 80px; width: 80px; margin: 10px; background-color: red; }