子级宽度没有自适应内容宽度撑开,只适应到父级100%

 1  #box{
 2          600px;
 3       }
 4       .inner-box{
 5         display: flex;
 6          100%;
 7         height: auto;
 8         background-color: #eee;
 9         overflow: auto;
10       }
11       p{
12         
13          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>
原文地址:https://www.cnblogs.com/ypppt/p/12883248.html