Question

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

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

overflow: hidden之所以不可行，是因为在某些情况下，一个或多个子组件将呈现一个子组件，例如dropdown / date-picker组件，由于以下原因，这些子组件将被隐藏：父母的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

org.mule.module.pgp.exception.MissingPGPKeyException: No key file found in: abc.gpg,test.pgp之所以不可行，是因为在某些情况下情况下，一个或多个子组件将呈现一个子组件，例如下拉菜单/日期选择器组件，由于父母的overflow: hidden而被隐藏。在这种情况下我希望使用它，子组件是绝对定位的（并固定到子组件）...

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

基于稳健的“下拉列表/日期选择器”的库通常会提供“转义填充”选项，该选项使您可以将下拉列表部分附加到所选元素（通常为overflow: hidden）上。如果图书馆还没有它，通常是因为没有人抱怨它。

下面将举一些例子来说明我的观点：

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

反应选择显示body道具，可让您门户选择菜单到您选择的dom节点。
反应日期：example
一个随机的旧answer of mine

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

1 个答案: