确定所需的弹性框宽度 [重复]

Question

我的页面底部有一个按钮面板。容器是一个 flexbox，所有按钮都排成一行，没有换行。这些按钮是<button> 或<a> 元素，其内容为图标和文本。现在由于页面太窄而无法包含所有按钮，我想将按钮缩小到可用空间。只有最右边的按钮会缩小。并且当它的宽度低于某个阈值时，按钮将只折叠为图标。然后右边的下一个按钮被缩小。

我可以使用 JavaScript 实现所有这些，但我需要知道按钮的内容是否适合页面。无论我尝试什么，flexbox 都不会超出其父 div，但按钮仍绘制在它的右端，因此 flexbox 永远不会比它的容器宽。

这种方法适用于表格。表格总是和它们的内容一样宽，即使它们的父级没有那么宽。但是 flexbox 似乎永远不会这样做。

如何使用 JavaScript 或 jQuery 代码找出所需的 flexbox 宽度是多少？这是适应所有 flexbox 内容所需的宽度。

“期望宽度”这个名称来自 Windows 窗体或 WPF，但它似乎没有在 HTML 中使用。所以如果我需要更好的搜索条件，请告诉我。

这是一个例子。 .container的宽度限制为200px；就我而言，它仅限于页面宽度减去填充。

* {
  box-sizing: border-box;
}

.container {
  width: 200px; 
  background: azure;
  padding: 10px;
}

.buttons {
  background: bisque;
  padding: 10px;
  display: flex;
  white-space: nowrap;
}

.buttons button,
.buttons a {
  flex-shrink: 0;
}

<div class="container">
  <div class="buttons">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
  </div>
</div>

Answer 1

经过大量尝试并偶然找到a similar question，这段代码似乎可以满足我的需要：

// Returns the total width of all children including their margins.
function childrenWidth(parent) {
    let contentWidth = 0;
    parent.children().each(function () {
        contentWidth += $(this).outerWidth(true);
    });
    return contentWidth;
}

let contentWidth = childrenWidth(flexBox);

这需要 jQuery。

但这样做也可能足够了，它返回一个四舍五入的值：

// flexBox is a jQuery object
let contentWidth = flexBox[0].scrollWidth;

没有 jQuery 也可以。

我使用当前版本的 Firefox、Chrome 和 Edge 对此进行了测试。它在 IE11 中做了一些事情，虽然不太一样。我不确定它是否与此代码有关。我的 IE11 支持没有扩展到响应式布局，所以我现在很好。