痛点
元素 flex：1；之后万一内容超出那就无法控制里面内容滚动或者其它方面。虽然当时想到一个折中方法： position:relative; 子元素 position absolute 定位来解决这个问题。但是其实还是多添加了一层div。
资料参考
- 于是去查了 张鑫旭大佬flex 表述；发现里面 flex:0;flex:none 所产生的现象和我在现在浏览器测试得效果完全不一样。所以可能是某些规则又变化了，那就没法子了。只能再进行搜索。
- 该篇大佬;flex 计算其实还是要基于它里面的内容content计算，只不过每次规则计算的可能有所不同。基于 width/height; --> 基于 主轴方向；--> 基于 content 概念。总共经历几个阶段，后续可能还会更改。
解决方法
- 设置 overflow:hidden(或者min-width:0); 这样父元素就不会有超出，所有子元素按各自宽进行缩放 占满所有空间。
- 设置 width:0; 这样每个元素都不是基于自身内容长度，而会平分整个父元素
3. 还是使用定位方法： flex：1 的那个元素 设置 position:relative; 子元素设置 position:absolute;
4. 使用 grid 布局。这个是真是方便，由于之前 flex完全够用，grid 属性又多。就懒得用。但是强迫自己使用写了两个页面之后，只能说真香。
总结
这里做个记录吧。如果我不去探究这个 flex 为什么会内容溢出，可能我会一直使用 position来解决这个方法。技术够用只是基础，万一哪天被别人看年龄当成前辈，结果一问问题 说不上个一二三。有点尴尬！有时候多想想，不是坏事。
