html - 我在外部div内水平有2个div。当第二个内部div的内容变长时，它应该包装在自己的div区域中

外层div：
InnerDiv1 InnerDiv2。

InnerDiv1和InnerDiv2在行的外部div内。

现在，如果InnerDiv2的文本变长，则它应该环绕并下降，但是起点应该是InnerDiv2的第一个字符。

    <html>
    <head>
    <style>
    .coverageDetailsOuterAHX {
     display: inline-block;
        margin-right: 2%;
        width: 317px;
        white-space:nowrap;
    }
    .coverageDetailsInnerAHX {
    display: inline-block;
        float: none;
        margin-right: 2%;
        white-space:nowrap;
    }
    .coverageDetailsAHX{
    display: inline-block;
         float:none;
        margin-right: 2%;
        white-space:wrap;
   }
   </style>
   </head>
    <body>
         <div class= "coverageDetailsOuterAHX">
            <div class= "coverageDetailsInnerAHX">
                <p>All Coverage Details.</p>
            </div>
        <div class= "coverageDetailsAHX" >
            <p>Learn more about CareFirst. Text is longer. Can accomodate
            more characters.</p>
        </div>
    </div>
</body>
</html>

结果应为：

All Coverage Details. Learn more about.CareFirst. Text is longer. Can
                      accomodate more characters.

最佳答案

Flexbox可以做到这一点。

.coverageDetailsOuterAHX {
  display: flex;
}

.coverageDetailsOuterAHX div {
  border: 1px solid green;
}

.coverageDetailsInnerAHX {
  flex: 0 0 auto;
}

<div class="coverageDetailsOuterAHX">

  <div class="coverageDetailsInnerAHX">

    <p>All Coverage Details.</p>
  </div>

  <div class="coverageDetailsAHX">

    <p>Learn more about CareFirst. Text is longer. Can accomodate more characters.</p>
  </div>

</div>

关于html - 我在外部div内水平有2个div。当第二个内部div的内容变长时，它应该包装在自己的div区域中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56988604/