如何实现含输入框的水平Flex容器响应式：文本触边时收缩输入框

原布局的核心问题是两个子容器都设置了width: 100%，导致外层flex容器总宽度超出视口，同时右侧Select为固定宽度且未配置收缩规则。要实现右侧文本触碰到窗口边缘时输入框开始收缩，可按以下方式调整：

1. 调整布局结构与对齐方式 #

移除两个子容器的width: 100%，外层flex容器使用justify-content: space-between实现左右内容分别靠向视口两端，整体宽度自适应视口。

2. 配置元素收缩规则 #

• 给右侧文本设置flex-shrink: 0，禁止其收缩，确保文本优先占据空间；
• 给Select设置flex: 1 1 20rem（允许收缩、初始宽度20rem），同时添加min-width限制最小收缩宽度，避免输入框过小。

修改后的代码 #

export default function App() {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      {/* 左侧内容 */}
      <div style={{ display: 'flex' }}>
        <h1>Hello StackBlitz!</h1>
      </div>
      {/* 右侧内容容器 */}
      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
        <Select 
          data={[]} 
          style={{ 
            flex: '1 1 20rem', 
            minWidth: '10rem' 
          }} 
        />
        <h1 style={{ flexShrink: 0 }}>Hello StackBlitz!</h1>
      </div>
    </div>
  );
}

原理说明 #

• 外层flex + justify-content: space-between让左右内容自动贴合视口两端，整体宽度随视口变化；
• 右侧容器内，文本因flex-shrink: 0不会被压缩，当视口宽度缩小到右侧总内容（输入框+文本）超出视口时，输入框会优先收缩，直到达到min-width的限制，完全符合需求。

内容的提问来源于stack exchange，提问作者sir-haver