如何确保含nowrap文本的div始终大于内容且按需适配尺寸？

你的问题核心是flex子项在容器空间不足时会被压缩，导致无法完整包裹设置了nowrap的文本。可以通过以下调整实现需求：

• 给.event-nav-item添加flex-shrink: 0，禁止flex子项被压缩，这样每个item会始终保持内容所需的宽度，不会因为容器变窄而被挤小。
• 保留width: auto（或改用flex-basis: auto，效果一致），让item根据内容自动调整尺寸，短文本（比如"BnS"）对应的div自然会比长文本的小。
• 若需要保留最小宽度限制，可继续保留min-width: 50px，当文本长度超过50px时，item会自动扩展到合适宽度。

调整后的CSS代码：

.event-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
}

.event-nav-item {
    margin: 0px 5px;
    padding: 5px;
    min-width: 50px; /* 可选，根据需要保留或删除 */
    width: auto;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0; /* 关键新增属性 */
}

修改后，当屏幕缩小到容器空间不足时，.event-nav会出现横向滚动条，每个.event-nav-item都会完整包裹自身文本，同时保持根据内容自动调整宽度的特性。

内容的提问来源于stack exchange，提问作者tan shi yu