html - flexbox child 中的文本内容导致它覆盖它的邻居

Question

假设我想div使用 flexbox 并排布置 2 个。第一个具有固定宽度，第二个填充剩余宽度。

.parent {
        display: flex;
        width: 100%;
        height: 400px;
      }

      .child1 {
        background: red;
        width: 300px;
      }

      .child2 {
        background: blue;
        flex-grow: 1;
      }

    <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

完美运行！

现在，如果我尝试将文本添加到 2nd div。

      .parent {
        display: flex;
        width: 100%;
        height: 400px;
      }

      .child1 {
        background: red;
        width: 300px;
      }

      .child2 {
        background: blue;
        flex-grow: 1;
      }

    <div class="parent">
      <div class="child1"></div>
      <div class="child2">
        aute dolor duis tempor labore amet ut proident elit adipisicing
        incididunt magna enim mollit aute cupidatat adipisicing nulla laborum
        est nostrud consequat in velit est exercitation esse nulla duis quis id
        est aliqua nostrud laborum magna culpa eiusmod sunt aliqua ex dolore
        laborum
      </div>
    </div>

为什么第二个div掩盖了第一个div？它不应该尊重我给第一个的固定宽度div并只换行它的文本吗？

标签： htmlcssflexbox