flex 布局 固定宽度内容被挤压变形

当我们在使用 flex 布局实现两栏布局时，我们给一个容器的宽度设置固定宽度 比如 width: 20px;，另外一个容器给 flex: 1，这样就能实现一侧固定宽度，另外一侧自适应宽度的一个布局，一切看起来是正常的，但是某些情况下，可能会遇见自适应宽度容器内子元素宽度过大，把自适应宽度容器撑开的情况，比如内部有不限制宽高的图片、code块等。会导致另外一侧固定宽度被挤压变小，这时我们可以给一个属性 flex-shrink: 0; 来让元素不会因为挤压而产生缩放。

flex 布局 内容撑大父容器

前面那种情况是很常见的，如果解决了固定容器被挤压变形的问题，你可能会发现一个新的问题，就是固定宽度容器宽度是不受挤压发生变形了，可是原来的自适应容器宽度甚至比父容器还大，这就是内容把自适应容器宽度撑大了，解决方式就是添加 min-width: 0; ，原理是：min-width: 0 允许它缩小到内容以下，避免被内容撑开。

这两个问题是我在开发博客的过程中遇到的，困扰我很久。第二个问题解决起来真的很玄学？