Text content in flexbox child causes it to cover its neighbour

Question

Say I want to have 2 div laid out side by side using flexbox. The first one is given a fixed width and the 2nd one fills the remaining width.

.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>

Works perfectly!

Now if I try to add text to the 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>

Why does the 2nd div cover up the 1st div? Shouldn't it respect the fixed width I have given the 1st div and just wrap its text?