Flex容器内固定定位div旁的div如何正常保留自身宽度布局？

当元素设置position:fixed后会脱离文档流，Flex容器不会再为它预留空间，所以第二个div会从页面起始位置布局。以下几种方法可以实现你要的效果：

方法一：直接给第二个div设置左侧外边距 #

最简单的方式就是让第二个div的左外边距等于固定定位元素的宽度，这样它会自动避开固定元素的区域：

<div class="container" style="display:flex;">
   <div style="position:fixed; width:15%;">...</div>
   <div style="width:85%; margin-left:15%;">...</div>
</div>

方法二：用占位元素保留Flex布局空间 #

给固定定位元素加一个宽度相同的占位容器，让Flex容器正常分配空间，再把固定元素定位到占位容器的位置：

<div class="container" style="display:flex;">
   <!-- 占位元素，保留15%的空间 -->
   <div style="width:15%;"></div>
   <!-- 固定定位元素，覆盖在占位元素位置 -->
   <div style="position:fixed; top:0; left:0; width:15%;">...</div>
   <!-- 第二个div自动占据剩余空间 -->
   <div style="flex:1;">...</div>
</div>

这种方式的好处是不用硬写第二个div的宽度，flex:1会自动填充剩余空间，更灵活。

方法三：改用粘性定位（Sticky） #

如果你的需求是元素滚动时固定在视口（比如侧边栏固定），可以把position:fixed换成position:sticky，它不会脱离文档流，Flex布局会正常识别它的宽度：

<div class="container" style="display:flex;">
   <div style="position:sticky; top:0; width:15%;">...</div>
   <div style="width:85%;">...</div>
</div>

注意：sticky定位需要设置top/bottom等偏移值才会生效，且父容器不能有overflow:hidden等属性影响它的粘性效果。

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