How to make a span according to the width of the content (Flexbox)?

Question

I have fixed width flex-row parent with span and div inside of it.

.parent {
  display: flex;
  flex-direction: row;
  width: 230px;
  background-color: blue;
}

.child1 {
  background-color: red;
}

.child2 {
  min-width: 40px;
}

<div class="parent">
  <span class="child1">There is some text inside span</span>
  <div class="child2"></div>
</div>

All I want is, span always to be the width of the text, and div to occupy the entire remaining width of the parent. Now (as you can see on the snippet) when the text moves to a new line, the red background area turns out to be wider than the text. How to fix this code? I need the red background to end exactly at the edge of the text.