使用display: flex;属性时，Flex容器的默认行为是让其子元素填充整个可用空间。如果你想要根据内容确定宽度，而不是整行，可以考虑使用以下方法：

使用inline-flex： 将display: flex;更改为display: inline-flex;。这会使Flex容器变成行内元素，根据内容调整宽度。
.flex-container {
  display: inline-flex;
}