如何仅显示未超出父容器宽度的子元素？

我来给你搞定这个需求！首先得明确核心问题：默认的flex布局会自动压缩子元素来塞进父容器里，但你要的是完全显示能放下的子元素，后面的直接隐藏，绝不压缩。下面分两步来实现，不管父容器宽度怎么变、子元素有多少个都能适配。

第一步：调整CSS，让子元素保持自身宽度 #

先修改你的CSS，给子元素加上flex-shrink: 0，这样每个子元素就不会被flex布局压缩，能保持自己的固有宽度，我们才能准确判断它能不能放进父容器里：

.parent {
  width: 200px;
  border: 2px solid black;
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap; /* 明确禁止换行，确保子元素在一行排列 */
}

.item {
  margin: 5px;
  padding: 2px;
  border: 1px solid black;
  flex-shrink: 0; /* 关键：禁止子元素被压缩 */
}

第二步：用JavaScript动态判断并隐藏溢出的子元素 #

因为CSS目前没办法直接判断“累计子元素宽度是否超过父容器”，所以得靠JS来计算。思路很简单：遍历所有子元素，累加它们的完整宽度（包括左右外边距），一旦加上当前子元素的宽度后超过父容器的可用宽度，就把这个子元素及后面所有的都隐藏掉。

而且还得考虑窗口大小变化的情况——比如用户调整了浏览器宽度，父容器宽度变了，我们得重新计算哪些子元素能显示。

具体代码如下：

// 获取父容器和所有子元素
const parent = document.querySelector('.parent');
const items = Array.from(parent.querySelectorAll('.item'));

// 定义计算并隐藏溢出元素的函数
function hideOverflowItems() {
  // 先把所有子元素恢复显示（处理窗口 resize 时的情况）
  items.forEach(item => {
    item.style.display = '';
  });

  const parentAvailableWidth = parent.clientWidth; // 父容器的可用内容宽度（不含边框）
  let totalWidth = 0;

  items.forEach((item, index) => {
    // 获取子元素的完整宽度：自身宽度 + 左右外边距
    const itemStyle = window.getComputedStyle(item);
    const itemFullWidth = item.offsetWidth + parseInt(itemStyle.marginLeft) + parseInt(itemStyle.marginRight);

    // 判断加上当前子元素后是否溢出
    if (totalWidth + itemFullWidth > parentAvailableWidth) {
      // 隐藏当前及之后的所有子元素
      for (let i = index; i < items.length; i++) {
        items[i].style.display = 'none';
      }
      return; // 停止遍历，不用再算后面的了
    }

    // 累计已用宽度
    totalWidth += itemFullWidth;
  });
}

// 页面加载时先执行一次
window.addEventListener('load', hideOverflowItems);
// 窗口大小变化时重新计算
window.addEventListener('resize', hideOverflowItems);

为什么这么做？ #

• flex-shrink: 0 是基础：如果不加这个，flex会自动压缩子元素，哪怕父容器装不下，所有子元素都会挤进去，根本没法判断“溢出点”。
• 用clientWidth获取父容器可用宽度：这个值是父容器内容区的实际宽度（不含边框、滚动条），能准确反映子元素可以利用的空间。
• 计算子元素的完整宽度：必须把外边距算进去，不然会导致计算偏差——比如子元素有margin:5px，如果只算自身宽度，累计出来的总宽度会比实际占用的空间小，判断就不准了。

这样调整后，不管你把父容器改成300px还是500px，子元素加多少个，都只会显示刚好能完全放进父容器的那些，后面的直接隐藏，完美符合你的需求！

内容来源于stack exchange