问题描述：
1.换行
在HTML中数字或连续的英文被当成是一个整体 就像汉字
2.width宽度
就算换行了，如果盒子是弹性宽度，那么是会被撑开的
解决办法：
1.解决不换行：
（数字作为一个整体，必须要声明每个字符）
word-wrap:break-word;//允许单词换行，但不分割 （必要）
word-break:break-all;//允许单词换行，分割 （可选）
white-space:pre-wrap;//保留空白且换行，空格在换行处会忽略 （可选）
注意：word-wrap对行内元素是没有效果的
2.对于宽度：
原本使用的是父盒子使用flex:1，内容盒子不设置宽度，当内容占满父盒子时换行
但无论是在内容盒子还是父盒子，这种方式是会被撑开的
可以使用calc(100% - 50px)，配合box-sizing:border-box,替换父盒子的flex1，当然单位可以% vw px
内容盒子现在就可以设置宽度了，而且必须设置！！！否者内容不会换行，继续撑开，例如可以设置max-width:100%
3.参考另一篇文章：HTML&CSS-进阶-flex宽度如何被子元素继承
