Почему ширина не соответсвует указанной?

Объясните пожалуйста, почему в примере ширина элемента уменьшается при указании flex-basis? https://codepen.io/alyona_fedorenko1/pen/XWXByVd В моем понимании левый блок должен занять 70% ширины родителя, т.е. стать 700px.

<div class="parent">
  <div class="child1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure dolorum consequuntur dolorem quam repellat nobis earum quo minus </div>
  <div class="child2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis, explicabo nihil harum vel provident earum eum debitis assumenda iste officiis ducimus similique, deserunt corporis reiciendis. .</div>
</div>

.parent {
  width: 1000px;
  height: 200px;
  display: flex;
}

.child1 {
  flex-basis:70%;
}