#box{
        width: 600px;
      }
      .inner-box{
        display: flex;
        width: 100%;
        height: auto;
        background-color: #eee;
        overflow: auto;
      }
      p{
        
        width: auto;
        font-size: 16px;
        background-color: aqua;
        white-space: nowrap;
      }
<div id="box">
      <div class="inner-box">
        <p>
          父级设置宽度100%时，超出的部分有滚动条滚动时出现;
          子级宽度自适应，由内容撑开；
          问题：
          1、子级宽度没有自适应内容宽度撑开，只适应到父级100%；
          原因：
          1、子级不设置宽度或者宽度自适应撑开且设置不换行的情况下，子级宽度只会撑开到父级的100%宽度，即上图p标签只会撑开至600px而不是text的撑开宽度
          解决：
          1、使子级p标签脱离文档流，设置absolute；
          2、设置父级节点innerbox,dispaly:flex;dispaly:grid;
        </p>
      </div>
    </div>