Flexbox居中div无法收缩，嵌套元素文本无法截断

我尝试在屏幕缩小时，截断id为first-item的<span>中的长文本。但为父元素设置margin后，该元素无法充分收缩，截断功能未完全生效。我认为这和flex元素收缩规则有关，但未能解决问题。

代码示例 #

CSS

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

#container {
  display: flex;
}

#first-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

HTML

<body>
  <main>
<div id="container">
  <span id="first-item">Long long long long long long long long long long long long long long long long long long long long long long long long long text to be truncated</span>
  <span>Shorter text</span>
</div>
  </main>
</body>

补充说明 #

根据评论修正了初始笔误，现在虽然能显示省略号，但元素只能收缩到一定程度，问题仍存在，截图如下：

问题根源在于flex容器的默认最小尺寸规则：flex元素的min-width默认值为auto，意味着它不会收缩到小于内部内容的宽度。结合你的布局，需调整以下几点：

1. 限制main宽度不超出视口，避免它因内部内容撑住而无法随屏幕收缩
2. 让#container占满main的可用宽度，确保子元素有足够收缩空间
3. 给#first-item设置flex: 1以占据剩余空间，并强制允许它收缩到小于内容宽度

修改后的CSS代码：

body {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; /* 限制main宽度不超过视口 */
  box-sizing: border-box; /* 避免margin/padding额外增加宽度 */
}

#container {
  display: flex;
  width: 100%; /* 占满main的可用宽度 */
}

#first-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1; /* 占据container剩余空间 */
  min-width: 0; /* 强制允许元素收缩到小于内容宽度 */
}

调整后，屏幕缩小时main会跟随视口收缩，#container占满main宽度，#first-item会自动占据剩余空间，在空间不足时完整截断文本并显示省略号。

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