使用 Flex 和 Grid 实现自动填充剩余宽度或高度

通过 CSS Flex 和 Grid 布局实现父容器宽度/高度不定，子元素自动填充剩余宽度/高度。并且在子元素内容过大时，保证内容不要超出父容器。

1. 父容器宽度不定，子元素自适应宽度，flex 实现。

关键代码是为 flex 子元素设置：

.fix {
  width: 0;
  overflow: auto;
}

2. 父容器高度不定，子元素自适应高度，flex 实现。

3. 父容器宽度不定，子元素自适应宽度，grid 实现。

关键代码是为 grid 子元素设置：

.fix {
  width: 100%;
  overflow: auto;
}