如何解决四溢的文字

Question

有人可以帮我解决我的笔的布局吗？ http://codepen.io/Sidney-Dev/pen/ALPgbG

当我开始调整页面大小时，列表的内容开始溢出，我无法弄清楚它可能是什么。

我给了我有表的部分的填充，以便恰当地查看内容溢出的方式。

div.tables{ 
    padding: 0 20px; 
} 

在此先感谢。

Answer 1

您在混合display: flex与特定的width属性。

如果你正在使用你的表容器display: flex，坚持flex: 1上的表格，这样反而：

table{ 
    width: 50%; 
} 

围棋有：

table{ 
    flex: 1; 
} 

Answer 2

您需要设置的内容理由父容器，以便元素知道如何弯曲。您还需要将表格设置为以灵活的方式显示。

div.tables{ 
    padding: 0 20px; 
    justify-content:center; 
} 
table { 
    display:inline-flex 
}