设置React导航栏为fixed定位后宽度异常扩展问题排查

问题原因 #

元素设置position: fixed后会脱离文档流，默认宽度由内部内容撑开，而非继承父容器的100%宽度；另外你的Container样式里写了flex-direction: row但未启用flex布局，导致内部元素排列混乱，进一步加剧宽度异常。

修改方案 #

调整Container的Styled Components代码，修复定位和布局问题：

export const Container = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* 强制元素铺满视口左右边缘，确保宽度100% */
    width: 100%;
    box-sizing: border-box; /* 让padding/border不会额外增加元素宽度 */
    overflow: hidden;
    transition: 1s;
    height: 3rem;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex; /* 启用flex布局，让flex-direction生效 */
    flex-direction: row;
    align-items: center; /* 垂直居中内部元素，优化布局 */
    z-index: 5;
    padding: 0 1rem; /* 可选：添加内边距避免元素贴紧屏幕边缘 */
`

关键修改点说明 #

1. left: 0; right: 0：替代单纯的width:100%，确保元素完全贴合视口左右边界，不会因为内部内容或滚动条导致宽度溢出。
2. display: flex：启用flex布局，让flex-direction: row生效，内部元素横向有序排列。
3. box-sizing: border-box：防止padding或border导致元素总宽度超过100%，避免横向滚动条。

额外优化建议 #

给SearchBar添加flex:1属性，让它占据导航栏剩余空间，避免其他元素挤压导致布局异常：

export const SearchBar = styled.div`
    flex: 1;
    margin: 0 1rem;
    /* 你的其他搜索栏样式 */
`

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