如何让flex布局中的div随长文本自动调整宽度？
2026-5-8
解决Flex容器中Div无法随内容自适应宽度的问题
我来帮你搞定这个flex布局的问题！你的代码里有两个关键原因导致div.b没法跟着内容自动调宽，还出现了文本换行：
- 你给
.flex-container > div设置了width: 100%，这个属性会强制每个子div都试图占满容器的可用宽度，直接抵消了div.b的width: auto设置； - Flex子元素默认自带
flex-shrink: 1属性，意思是当容器空间不够时，元素会被压缩，进而导致文本被迫换行。
修改方案
只需要调整几个CSS属性就能实现你要的效果：
- 去掉全局的
width: 100%，让子元素宽度由内容或flex属性来控制； - 给div.b设置
flex: none（等价于flex: 0 0 auto），禁止它被压缩，确保宽度完全跟随内容自适应； - 如果希望div.a能填充容器的剩余空间，可以给它加
flex: 1属性。
修改后的完整代码
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; /* 移除强制占满宽度的width: 100% */ margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } div.a{ flex: 1; /* 让div.a自动填充容器剩余空间 */ } div.b{ flex: none; /* 不放大、不缩小，宽度完全由内容决定 */ /* 也可以拆成 flex-shrink: 0; width: auto; 效果一致 */ } </style> </head> <body> <div class="flex-container"> <div class='a'>Blocked Content Foo</div> <div class='b'>Long Text Bar That Gets Longer And Longer Without Wrapping</div> </div> </body> </html>
关键属性说明
flex: 1：给div.a设置后，它会自动填充flex容器中除div.b以外的所有剩余空间；flex: none：给div.b设置后，它的宽度完全由内部文本内容决定，既不会被压缩也不会主动放大，完美实现自适应需求。
这样修改之后，不管你给div.b加多长的文本，它都会自动调整宽度，再也不会出现文本换行的问题啦！
内容的提问来源于stack exchange，提问作者SchoolforDesign
