Html Flexbox父级在不溢出的情况下计算宽度的问题：隐藏

基本上，我想在React中实现一个可重用库，它获取组件列表并将它们显示为flex容器。当组件装入时，或当用户调整窗口大小时，组件将重新计算其宽度，如果其子项的总和超过其自身的宽度，它将隐藏多余的子项，并在列表的末尾附加一个按钮，该按钮在垂直下拉列表中显示多余的子项。该组件有一个定义其最小宽度的道具，但在其他情况下，它通过引用包含所有子元素的flex dom节点来计算其宽度。它本身也是一个flex项，其flex属性为

10

问题的关键在于，如果我将

overflow:hidden

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

之所以

溢出：隐藏
不是一个可行的解决方案，是因为在某些情况下，一个或多个子组件将呈现一个子组件，例如下拉/日期选择器组件，该子组件将由于父组件的
溢出：隐藏
而被隐藏。在我希望使用此功能的情况下，子组件是绝对定位的（并锚定到子组件），因此不会影响子组件相对于父flex容器的宽度

我可以想出一些解决方案，包括修补子组件本身（使用涉及
位置：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);

.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;
}

<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>

.scss文件

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);

.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;
}

<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>

.html文件

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);

.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;
}

<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>




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

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

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

为了阐明我的观点，以下是一些例子：


反应选择：
React select会公开一个
menuPortalTarget
prop，让您可以访问门户
将“选择”菜单添加到所选的dom节点


反应日期：
一个随意的老人
感谢您的回复！通过使用css网格而不是flexbox，我最终找到了令人满意的结果（尽管flexbox通常更适合一维布局）。不客气。请注意，在修改后的演示中，如果您使窗口宽度足够窄，一些子窗口（仍然可以）从容器中逃出（显示水平滚动条）。我不知道这对您的用例是否重要。