如何使文本在响应标题（flexbox）中不与外部容器重叠？

Question

我试图做一个负责任的报头看起来好于大多数屏幕分辨率（宽度：320-1920px）与媒体查询的最低使用：

但是当我缩足够宽度，文本开始重叠外容器：

首先想到的是对li元素使用overflow: hidden;但它不看任何好转：

下面的代码： http://jsfiddle.net/Hardcore/hxgbk6m0/1/

当边框li元素开始接触文字时，我希望它不再缩小，所以文字不会重叠li元素的边框。文字长度可以改变，所以我不能只设置静态最小宽度。当水平边框达到文字时，我也想让高度停止缩小，所以菜单项总是正方形。

我该怎么做？这甚至可以使用CSS而不使用JavaScript？我花了几个小时试图做到这一点，似乎我不能自己做。请帮帮我。

Answer 1

取消按钮或Div的宽度，然后使用填充右侧和填充左侧。这将允许按钮或div随着页面的移动而变大，并且将在文本的每一侧保持相同的空间。

.className{ 
padding-right:1%; 
padding-left:1%; 
} 

除此之外，您将不得不通过@media查询更改字体大小。