Getting long text to wrap into a dynamic div

Question

The goal is to have the red divs take up the remaining space in the blue divs as they receive content. However, when the content is one long continuous word, the content refuses to wrap. If I hardcode the red div to something like 100px, wrapping happens just fine. However I can't tell the red divs to not expand past the blue.

<div className="listedVideoTitleWrapper">
    <p className="listVideoTitle">{fileName}</p>
    {/* <p className="listVideoDate">{fileDate}</p> */}
</div>

listedVideoTitleWrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: solid red 1px;
  flex: 1;
}
.listVideoTitle {
  margin: 0;
  width: inherit;
  word-wrap: break-word;
}

Thanks for looking through, peeps.