I have several divs and children divs set up and flexed into a row. I want the overflow contents of the left div to truncate and hide in favor of the contents of the right div when the element is resized horizontally. Check this codepen for a basic example of what I'm trying to do. However, even though I was able to get it working in that pen, it won't work the same way in my actual code. Here's what I have:

       <div className={videoAssetCard}> {/* this outer div is flexed to a column */}
        <div className={videoAssetCard__ThumbnailContainer}>
          <img
            src={thumbnails.animatedUrl}
            alt={video.name}
            className={videoAssetCard__Thumbnail}
          />
        </div>
        <div className={videoAssetCard__DetailsContainer}> {/* container flexed to row */}
          <div className={videoAssetCard__Details}> {/* container that should truncate */}
            <p className={videoAssetCard__Title}>{video.name}</p>
            <p className={videoAssetCard__Desc}>{video.description}</p>
          </div>
          <div className={videoAssetCard__Actions}> {/* container that should not truncate */}
            {actionButtons}
          </div>
        </div>
      </div>

.videoAssetCard__DetailsContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

.videoAssetCard__Details {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.videoAssetCard__Actions {
  display: flex;
  flex-direction: row;
}

Even though I have the same values in the corresponding selectors in my code, when I resize my screen down to where the contents of videoAssetCard__Details should be truncated, instead the whole component stops resizing all together so that the contents of that div never get cut off. Very confused why this is happening as it's working in the codepen. Anyone have any idea what I'm doing wrong?