解决 Flex 子元素居中，溢出滚动后被裁切的问题

晚上修改了 小窝 页面右侧目录树的定位，并且修改了二级导航栏的布局。其原有的设计采用的是 display: flex + justify-content: center 进行居中的，但这样也遇到了一个问题。如果我使用 white-space: nowrap 禁止文字换行（Flex 默认也是不换行，但是并不会溢出，而是会使得子元素宽度变窄导致文字被换行），并结合 overflow: auto 来使得内容出现滚动条，则会出现左侧被“裁切”掉的效果。

上网搜索了一番，出现这个效果的原因，主要是因为 Flex 居中对齐的特性造成的。当内容被强制不换行后，无论是否设定 overflow: auto，左侧区域由于居中的原因就变成“溢出”区域了，又由于设定了 overflow: auto 的缘故，右侧就还是正常显示的。

为了解决这个问题，我试了一个方案，就是万能的 margin: auto。它可以让任何内容横向居中对齐。但问题来了，Flex 占用了 100% 的宽度，有没有什么宽度可以让它根据内容自动调整？width: max-content 这个属性就迎刃而解，它就可以实现这样的效果！再加上 max-width: 100% 约束最大宽度，就会在手机上出现滚动条而不会溢出了！

.navigation{
    margin: auto;
    display: flex;
    overflow: auto;
    max-width: 100%;
    width: max-content;
    white-space: nowrap;
    margin-bottom: 2.5em;
}

你可能会问，这完全不就是多此一举吗？把子元素全部 display: inline-block，父元素 text-align: center 不就好了 🐎 ？没错，这招确实可以，但是如果 HTML 在编写的时候内容存在换行，则会出现间距不统一的问题，因此 Flex 才是更好的实践！

如果你担心 max-content 的兼容性，那么试试这一招？把 Flex 的 width 定义取消，里面的第一个子元素设置成 margin-left: auto，最后一个子元素设置成 margin-right: auto 也可以实现居中且不影响滚动的效果！

.navigation{
    display: flex;
    overflow: auto;
    max-width: 100%;
    white-space: nowrap;
    margin-bottom: 2.5em;
}

.navigation a:first-child{
    margin-left: auto;
}

.navigation a:last-child{
    margin-right: auto;
}