如何在flexbox中合理设置div宽度且不挤压其他元素？

你可以通过给目标容器添加flex: 1配合文本溢出控制属性来实现需求，既让它占据justify-content: space-between分配的剩余空间，又不会挤压其他元素。修改后的代码如下：

<div style="display:flex; justify-content:space-between; width:100%">
    <div id="this" style="flex: 1; margin-right: 16px;">
       <h3 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;">超长标题示例文本超长标题示例文本超长标题示例文本</h3>
    </div>
    <div>
      <input type="radio">
      <input type="radio">
      <input type="radio">
   </div>
   <div>
      <p>Text</p>
   </div>
</div>

关键属性说明： #

• flex: 1：给id为this的div设置这个属性后，它会自动占据flex容器中除其他子项固有宽度之外的所有可用空间，同时不会挤压其他子项的空间。
• white-space: nowrap：强制标题文本不换行，保持一行显示。
• overflow: hidden：隐藏超出容器宽度的文本内容。
• text-overflow: ellipsis：将溢出的文本替换为省略号，提升可读性。
• margin-right: 16px：可选，给标题容器和右侧元素之间添加一点间距，避免视觉上过于拥挤。

这样设置后，标题容器会尽可能利用剩余空间显示文本，当文本过长时自动隐藏溢出部分，完全不会影响右侧的单选框和文本元素的布局。

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