闲来无事搓的小网站偶遇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来写写小网站

 

 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章