Flex弹性布局元素被挤压变扁问题解决

像这种，如果子元素的宽度过大，就会出现被挤扁的情况，不能显示实际的宽度。

解决方法：

有一个 flex-shrink 属性，可以解决元素被挤压的问题。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-shrink 的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

这里将 flex-shrink 的值设为 0 ，元素就不会被挤扁了。

flex-shrink: 0;

未经允许不得转载：Web前端开发资源网 » Flex弹性布局元素被挤压变扁问题解决

推荐阅读：

Bootstrap滚动监听不用offset实现向下偏移

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

解决margin击穿的几种方法

PHP连接MySQL数据库报错：Call to undefined function mysql_connect()的解决方法

给元素添加伪类 :before 不显示的解决方法