Wrapped text taking up too much space in flex row

Question

In the below list, some list items have wrapped text. When the text wraps, the width of the <p> element spans a bit too much which forces the blue square to the far right.

Is there some way to get the paragraph element to span the minimum width such that the text wraps as needed without pushing the blue square all the way to the right?

body {
  margin: 0;
}

ul {
  width: 300px;
  background: snow;
  margin: 0;
  padding: 0 0 0 30px;
}
ul li {
  display: flex;
  align-items: center;
}
ul li div {
  width: 40px;
  height: 40px;
  background: violet;
  flex: 0 0 40px;
}
ul li p {
  font-size: 24px;
  padding: 16px;
  text-align: left;
  /* flex: 0 1 calc(100% - 68px); */
}
ul li i {
  width: 28px;
  height: 28px;
  background: dodgerblue;
  flex: 0 0 28px;
}

<ul>
  <li>
    <div></div>
    <p>foo</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo very much longer text here</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo some more text here</p>
    <i></i>
  </li>
</ul>