Flexbox 父级计算宽度而不溢出的问题：隐藏

Question

基本上，我想在 React 中实现一个可重用的库，它接受一个组件列表并将它们显示为一个 flex 容器。当组件挂载时，或者当用户调整窗口大小时，组件会重新计算其宽度，如果其子项的总和超过其自身宽度，它将隐藏多余的子项并在列表末尾附加一个按钮以显示多余的子项垂直下拉列表中的子项。该组件被赋予一个定义其最小宽度的道具，否则它通过引用包含所有子元素的 flex dom 节点来计算其宽度。它本身也是一个弹性项目，其弹性属性为1 0 <value of minWidth property>。

问题的症结在于，如果我将 overflow: hidden 添加到 flex 容器中，一切都会很好地工作。当用户调整窗口大小时，大小将从 X 一直重新计算到提供的最小宽度。没有溢出：隐藏，但是，它的宽度的下限等于其子项的总和。您可以在下面的演示中观察到这一点。如果您打开 devtools 并调整窗口大小，您将看到左右容器的 clientWidth 值（每个容器都是上述组件的单独实例）。预期的行为是，随着窗口的大小调整更小，左右容器将分别缩小到 200 和 300 像素，在此期间我将能够计算要隐藏在每个中的子项数量（左侧为 1，和1 然后最终 2 在正确的容器中）。如果您取消注释掉 codepen scss 文件中的第 9 行，您可以观察到这种确切的行为。

overflow: hidden 不是一个可行的解决方案的原因是，在某些情况下，一个或多个子组件将呈现一个子组件，例如下拉/日期选择器组件，然后由于父组件的overflow: hidden。在我希望使用它的情况下，子组件是绝对定位的（并锚定到子组件），因此不会影响子组件相对于父 flex 容器的宽度。

我可以想到一些涉及修补子组件本身的解决方案（使用涉及position: fixed 等的解决方案），但由于这是一个可重用的库，它只需要显示一个组件列表，如果可能的话，我想保留对父容器的修复。

.js 文件

const left = document.querySelector('.left');

const right = document.querySelector('.right');

const handleWindowResize = event => {
  console.log('left: ', left.clientWidth);
  console.log('right: ', right.clientWidth);
};

window.addEventListener('resize', handleWindowResize);

.scss 文件

.toolbar {
  display: flex;
  width: 100%;
  border: 1px solid black;
}

.left, .right {
  display: flex;
  // overflow: hidden;
}

.left {
  flex: 1 0 200px;

}

.right {
  flex: 1 0 300px;
  justify-content: flex-end;
}

.item {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

.html 文件

<div class='toolbar'>
  <div class='left'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
  <div class='right'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
</div>

Codepen demo

Answer 1

overflow: hidden 不是一个可行的解决方案的原因是在某些 在这种情况下，一个或多个子组件将呈现一个 子组件，例如下拉/日期选择器组件，然后 由于父母的overflow: hidden 而被隐藏。在这种情况下 我希望使用它，子组件是绝对定位的 （并锚定到子组件）...

这是一个众所周知的问题，在模态中很常见。在您的情况下，您基本上必须使用overflow: hidden。可能别无选择。

基于“dropdown/datepicker”的强大库通常会提供一个“逃生舱口”选项，允许您将下拉部分附加到所选元素，通常是body。如果图书馆还没有它，通常是因为还没有人抱怨它。

为了说明我的观点，这里有一些例子：

• 反应选择：https://react-select.com/advanced#portaling

  React-select 暴露了一个 menuPortalTarget 属性，它可以让你传送门 选择菜单到您选择的 dom 节点。

• 反应日期：example
• 一个随机的老answer of mine