html - Flexbox 父计算宽度而不会溢出的问题 : hidden

Question

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

问题的症结在于，如果我添加 overflow: hidden，一切都会很漂亮到 flex 容器。当用户调整窗口大小时，大小将从 X 一直重新计算到提供的最小宽度。没有 overflow: hidden，然而，它的宽度有一个 floor 等于它的 child 的总和。您可以在下面的演示中观察到这一点。如果您打开 devtools 并调整窗口大小，您将看到左侧和右侧容器的 clientWidth 值(每个容器都是上述组件的一个单独实例)。预期的行为是，随着窗口的大小调整得更小，左右容器将分别缩小到 200 和 300px，在此期间我将能够计算隐藏在每个容器中的子级数量(左侧 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

The reason overflow: hidden is not a viable solution is that in some cases, one or more of the children components will render a sub-component such as a dropdown/date-picker component that will then be hidden because of the parent's overflow: hidden. In the cases that I wish to use this, the sub-component is absolutely positioned (and anchored to the child component)...

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

基于“下拉菜单/日期选择器”的强大库通常会提供一个“转义舱口”选项，允许您将下拉列表部分附加到所选元素，通常是 body。如果图书馆还没有它，通常是因为还没有人提示它。

为了阐明我的观点，这里有一些例子:

• React 选择:https://react-select.com/advanced#portaling

  React-select exposes a menuPortalTarget prop, that lets you portal the select menu to a dom node of your choosing.

• react 日期:example
• 一个随机的老answer of mine