如何让flex容器内div/span的部分文本换行并保留样式？

我需要为一段文本应用自定义样式，且该文本必须置于flex容器中以使用flex布局的相关特性。当前遇到的问题是，当容器空间不足时，文本会发生溢出（效果：）。我希望能将文本拆分，使换行后的部分仍保留原有样式（预期效果：）。

更新说明：感谢各位解答，但实际问题比初看更复杂。目前的解决方案会导致.text容器内部换行（效果：），这与我预期的效果不符。

示例代码 #

CSS代码 #

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px; }

.wide-container, .narrow-container {
  flex: none;
  background-color: #f7f7f7;
  border-radius: 5px;
  padding: 10px 20px;
  box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
  border: 1px #c2c2c2 solid; 
}

.wide-container {
  width: 600px; 
}

.narrow-container {
  width: 300px; 
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0; 
}

.text {
  flex: none;
  padding: 5px 2px;
  background-color: salmon;
  color: white; 
}

HTML代码 #

<div class="wrapper">
  <div class="wide-container">
    <div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
  </div>
  <div class="narrow-container">
    <div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Andrew Rusinas