1 #box{
2 width: 600px;
3 }
4 .inner-box{
5 display: flex;
6 width: 100%;
7 height: auto;
8 background-color: #eee;
9 overflow: auto;
10 }
11 p{
12
13 width: auto;
14 font-size: 16px;
15 background-color: aqua;
16 white-space: nowrap;
17 }
18 <div id="box">
19 <div class="inner-box">
20 <p>
21 父级设置宽度100%时，超出的部分有滚动条滚动时出现;
22 子级宽度自适应，由内容撑开；
23 问题：
24 1、子级宽度没有自适应内容宽度撑开，只适应到父级100%；
25 原因：
26 1、子级不设置宽度或者宽度自适应撑开且设置不换行的情况下，子级宽度只会撑开到父级的100%宽度，即上图p标签只会撑开至600px而不是text的撑开宽度
27 解决：
28 1、使子级p标签脱离文档流，设置absolute；
29 2、设置父级节点innerbox,dispaly:flex;dispaly:grid;
30 </p>
31 </div>
32 </div>
