如何让width:auto的position:fixed元素居中且窄屏不被压缩？

当前实现的问题根因为：固定定位元素的宽度默认会跟随视口宽度收缩，当视口宽度小于内部菜单+logo的总宽度时，就会出现内容被挤压的问题。

方案1：添加min-width规则（最简便） #

直接给Container组件新增min-width: max-content属性即可，无需修改原有逻辑，完美符合保留width: auto、内容自适应的需求。
修改后的代码如下：

const Container = styled.div`
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: max-content;
`;

规则说明：max-content会强制元素的最小宽度等于内部所有内容不换行排列所需的总宽度，后续增减菜单项时，头部宽度会自动适配，不需要手动调整。

方案2：兼容替代实现 #

如果需要兼顾老旧浏览器的兼容性，可以改用以下居中写法，效果完全一致：

const Container = styled.div`
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: table;
    width: auto;
`;

这个方案利用display: table的宽度自适应特性，同样可以实现头部宽度随内容自动调整，且不会被视口压缩。

移动端适配补充说明 #

如果需要适配小屏设备，避免头部过宽导致页面出现横向滚动条，可以配合媒体查询调整规则：

const Container = styled.div`
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: max-content;

    @media (max-width: 768px) {
        min-width: 100%;
        padding: 0 16px;
    }
`;

小屏下可配合菜单折叠组件使用，适配移动端浏览体验。

内容的提问来源于stack exchange，提问作者Kasper Aamodt