父元素设width:100%时，子元素width过渡仅单向生效如何解决？

你的问题出在**固定定位的nav设置width:100%**时，flex布局的特性导致搜索栏收缩到0时无法触发过渡。下面是几个既能让nav铺满屏幕，又能恢复过渡效果的可行方案：

方案1：用left/right:0替代width:100%（推荐） #

修改nav的CSS，移除width:100%，添加left:0和right:0：

nav {
  background-color: var(--nav-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0; /* 让导航栏左边缘对齐视口 */
  right: 0; /* 让导航栏右边缘对齐视口 */
  z-index: 50;
  padding: 20px 150px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

原理：fixed定位元素设置left和right为0时，会自动填充整个视口宽度，这是固定定位铺满屏幕的标准写法，不会干扰内部flex元素的尺寸过渡计算。

方案2：给搜索栏添加min-width:0 #

保留nav的width:100%，给搜索栏强制设置最小宽度为0：

#search-bar {
  transition: width 0.5s;
  min-width: 0; /* 允许搜索栏收缩到0 */
}

原理：flex子元素默认的min-width:auto会阻止元素收缩到小于内容宽度，导致width:0时浏览器直接跳过过渡。添加min-width:0后，元素可以正常收缩到0，过渡效果恢复。

方案3：给nav添加overflow:hidden #

保留nav的width:100%，给nav添加overflow:hidden：

nav {
  /* 其他原有样式 */
  width: 100%;
  overflow: hidden; /* 建立新的格式化上下文，正确计算内部元素尺寸 */
  box-sizing: border-box;
}

原理：overflow:hidden会让nav创建新的块格式化上下文，强制浏览器正确计算内部flex元素的尺寸变化，从而触发过渡。

以上三个方案都能满足你的需求：nav铺满屏幕、保留两端布局、搜索栏隐藏/显示均有平滑过渡。优先推荐方案1，它是固定定位元素铺满屏幕的最佳实践，不会引入额外的样式限制。

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