CSS - white-space：nowrap覆盖响应式站点中容器元素的宽度

Question

我正在玩一个响应式网站。我有一个页面显示div使用flex布局的列表。每个div将包含食谱列表的标题和描述。我希望描述显示在一行，没有换行。我目前正在使用：

overflow: hidden;
text-overflow: ellipses;
white-space: nowrap;

然而，当屏幕宽度变得足够小时，我注意到一个奇怪的结果。随着屏幕变小，带有文本的div不再缩小，并设置一定宽度，使其与父div重叠。当我删除white-space：nowrap属性时，div会随着屏幕大小的变化而响应，但是预期的结果是文本没有换行。

参见gif演示

HTML
<div class="wrapper">
  <main>
    <div class="recipe-main">
      <div class="content-container">
        <div class="content">
          <p id="title">Title</p>
          <p id="desc">Description</p>
        </div>
        <div class="content">
          <p id="title">Title</p>
          <p id="desc">Description</p>
        </div>
      </div>
    </div>
  </main>
</div>

CSS
.wrapper {
  display: flex;
}

.main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

.recipe-main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.content-container {
  flex: 100%;
  max-width: 100%;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: hidden;
}