如何让div的第3个无固定宽子元素占据父容器剩余宽度

直接用CSS Flex布局就能完美解决你的需求，不需要计算任何固定宽度，完全适配所有给定条件：

修改后的完整代码 #

<div class="container">
  <div class="menu">
    <div class="one">
      one
    </div>
    <div class="two">
      two
    </div>
    <div class="remaining">
      remaining
    </div>
    <div class="three">
      three
    </div>
  </div>
</div>

.container{
  width:100%;
  background-color:tomato;
  padding:4px 0;
}
.menu{
  background-color:orange;
  width:300px;
  display: flex; /* 核心：开启flex布局 */
}
.one,.two,.three{
  background-color:dodgerblue;
  /* 默认flex-grow:0，自动占据自身内容宽度 */
}
.remaining{
  background-color:green;
  flex-grow: 1; /* 核心：让该元素占据父容器剩余所有空间 */
}
.menu,.one,.two,.three,.remaining{
  padding:5px;
  border:1px solid black;
}
/* 移除原来的inline-block设置，flex布局不需要 */

关键逻辑说明 #

• 给.menu添加display: flex，将容器内的子元素转为弹性布局项
• .one、.two、.three保持默认的flex-grow: 0，只会占用自身文本内容所需的宽度
• 给.remaining设置flex-grow: 1，它会自动填充.menu容器中除了其他三个元素之外的所有剩余空间，直接把.three推到容器末端，完全覆盖.menu的橙色背景

这样就完全满足你所有的要求：所有子元素宽度无需预设，前三个元素自适应内容，第三个元素填满剩余空间。

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