闲来无事搓的小网站偶遇flex和overflow问题

主要问题

opt-card 这个元素样式，本身设为了  display: inline-flex  现在我想让它超出不换行而是显示滚动条，如果使用默认的display:nowarp 则会导致子元素被极限压缩

所以最后给子元素加了  flex-shrink: 0;  这样就可以实现即不换行也不会压缩

 

可有可无的参照

这是大致的html结构

<div class="opt" data-v-d4948df9=""><div class="opt-card" data-v-d4948df9=""><div class="first-item" data-v-d4948df9="">加入方式</div><div class="success item" data-v-d4948df9="">离线</div><div class="success item" data-v-d4948df9="">正版</div><div class="success item" data-v-d4948df9="">白名单</div><div class="success item" data-v-d4948df9="">白名单</div><div class="success item" data-v-d4948df9="">白名单</div><div class="success item" data-v-d4948df9="">白名单</div></div><div class="opt-card" data-v-d4948df9=""><div class="first-item" data-v-d4948df9="">运营</div><div class="success item" data-v-d4948df9="">公益</div><div class="error item" data-v-d4948df9="">商业</div></div><div class="opt-card" data-v-d4948df9=""><div class="first-item" data-v-d4948df9="">世界规则</div><div class="success item" data-v-d4948df9="">不掉落</div><div class="success item" data-v-d4948df9="">不蔓延</div><div class="success item" data-v-d4948df9="">爆炸保护</div></div></div>

 

如图：

 

 

 

近期生活：

写代码从15年写到如今，我反而面临的是面试难，（即将流浪街头的感悟），哈哈，后端.Net方向再没什么好学的了，也就时不时追追新语法新类库

反而是微软的ts重新勾起我的兴趣，闲来无事则用vue3和ts来写写小网站