【FlexBox】display : flex 布局下，父元素宽度不能自适应子元素宽度

最近闲来无事准备写个后台管理的前端模板，顺便拿 FlexBox 练手。

一、概述：

<div class="menu-box">
    <ul class="menu-group">
        <li class="menu-item"> ... </li>
        <li class="menu-item"> ... </li>
        <li class="menu-item"> ... </li>
        ...
    </ul>
</div>

注：div.menu-box 为盒子；ul.menu-group 为项目集合；li.menu-item 为项目子体

二、项目实例：

1、这里展示的 "盒子 : menu-box" 宽度为740px

2、当前 "项目集合 : ul" 的宽度明明超出了 "盒子"，但是它的宽度还是740px，很费解

 3、可以看出来，"项目子体 : li" 是通过内边距：padding: 0 15px 填充的宽度

4、既然 "项目集合 : ul" 识别不出来填充宽度，就给 "项目子体 : li" 设置实际宽度：min-width: 100px（设置 min-width 还是考虑到 "项目子体" 内容超出的延展性）

注：设置了 min-width: 100 ，当内容超出后默认填充宽度，故第一个宽度为 125px

 5、"项目子体 : li" 设置 min-width: 100px 时，当内容超出后的填充宽度还是没有识别出来，由此可以得出结论："项目集合 : ul" 只获取到了 "项目子体 : li" 的设计宽度，而非实际宽度

注：9个 "项目子体 : li" 均设置了min-width:900px，只获取到了设计宽度 900px，第一个子体的多出来 29px 的实际宽度被忽略了

 6、不过多赘述了，还有两张反向测试的结果，感受一下

三、解决方案

1、终于还是找到了 MDN文档：

控制Flex子元素在主轴上的比例 - CSS（层叠样式表） | MDN (mozilla.org)

 2、通过文档找到了 width: max-content（元素内部的实际宽度）

 四、总结

总结以后再写吧，现在还是很懵逼的状态 ...