閒來無事搓的小網站偶遇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來寫寫小網站