【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" 是通过内边距&#x