css中overflow: auto爲什麽看不到全部内容

Question

<v-col cols="8" class="overflow d-flex justify-space-around">
            <div
              v-for="(content, key) in header.contents"
              :key="key"
              :style="{
                background: content.color == 'WHITE' ? '' : content.color,
              }"
            >
              〇{{ name(content) }}
            </div>
          </v-col>




.overflow {
  overflow: auto;
}

原本是這樣的

加多一項后，不僅擠在一起了，還前面的内容也看不到了

Answer 1

使用display:flex了吗？
增加这个 flex-shrink: 0;

https://developer.mozilla.org...

Answer 2

加上一个强制不换行呗，如果只是一行显示的话。

现在你这个里面只有 d-flex 和 justify-space-around，但并没有具体定义每个 div 的宽度，全部都是弹性伸缩，都挤在一起了，放不下，所以 〇{{ name(content) }} 这里的 〇 跟 {{ name(content) }} 换行了。

white-space: nowrap; 这个是其中一个解决方案。