2022-01-21 工作记录--CSS-flex-shrink:0 + 隐藏overflow滚动条样式 + calc(100vh - 50px)无效

一、flex-shrink:0【让overflow：auto奏效】

三次遇见这个问题，三次都想不起来这个属性，So 必须认真做个笔记哈✍

1、问题

我想实现的效果是： 给ul设置overflow: auto;，然后给里面的小li设置固定的宽度，这样就让超出ul宽度的小li实现滚动效果

But😮

实际效果是： 里面的小li超出ul宽度后，里面的小li的宽度并不是我给的宽度，而是被挤压成刚好所有的小li可以在ul里面且不超出ul

那么，重头戏来啦，解决这个问题的王者就是给里面的小li配置flex-shrink:0

2、举例

example1：

默认状态下：

加了flex-shrink:0;之后：

example2：

默认状态下：

加了flex-shrink:0;之后：

二、隐藏overflow滚动条样式

代码如下：

.t_imgs {
  width: 45%;
  height: 100%;
  margin: auto;
  overflow-y: auto;
}
.t_imgs::-webkit-scrollbar {
  display: none
}

三、calc(100vh - 50px)无效

假如失效了，请注意 很有可能是书写问题：

减号前后一定要加空格！减号前后一定要加空格！减号前后一定要加空格！