javascript - CSS Flex + 固定尺寸容器高度 + 由于溢出 :hidden 禁用部分绘制的元素

Question

我会尽量简化我的问题:

我有一个固定高度为 200 像素的 div 容器。在里面，我有一个显示垂直元素的 flexbox。每个元素都有一个不应更改的固定高度。我使用 overflow: hidden 来防止最后一项超出 200px。这很好用。

这就是我对 overflow: hidden

的看法

这是我没有overflow: hidden

但是现在，我想向前迈出一步，如果由于容器固定高度限制和 overflow: hidden

这才是我真正想要的，只显示那些没有被溢出完全或部分切割的元素:隐藏；

实现该目标的最佳做法是什么？一种“确保所有元素都适合固定高度组件内的固定高度，如果不适合，则根本不显示它”。

使用最新的 React。可能无关紧要，但仍然如此。

我在这里做了一个小例子。 https://jsfiddle.net/hfw1t2p0/

基本上，我想继续强制 flexbox 的最大高度为 200px，但有某种自动化可以杀死所有部分或完全不可见的元素，例如示例中的元素“4”和“5”。

请注意 200 像素的 flexbox 高度和 50 像素的元素高度只是示例。实际上，我需要一个 flexbox 来剔除任何不能完全放入其中的元素……直到运行时才知道 flexbox 的最大高度或元素的最小高度。

Answer 1

第一件事:你应该从使用 React 中获益:

为了动态生成内容，我将添加 gridItem 到 state，以便动态呈现它们。

state = {
    items: [
      "1",
      "2",
      "3",
      " 4 I want this hidden, its partially visible",
      "5 I want this hidden, its partially visible"
    ]
  };

对于渲染:

 render() {
    return (
      <div className="test">
        <div className="gridContainer">
          {this.state.items.map(el => {
            return <div className="gridItem">{el}</div>;
          })}
        </div>
      </div>
    );
  }

.

First Demo

这是最酷的部分:

基于:

Each item has a FIXED height which should not change

这样所有的元素都应该有相同的高度。解决方案是添加:

1- ItemHeight

2-容器高度

3-边框宽度

国家。现在通过一些计算 + 内联样式你可以实现你的目标:

首先你的状态将是:

 state = {
    containerHeight: 200, // referring to Container Height
    gridHeight: 50, // referring to grid item Height
    border: 1, // referring to border width
    items: [
      "1",
      "2",
      "3",
      " 4 I want this hidden, its partially visible",
      "5 I want this hidden, its partially visible"
    ]
  };

在您的 render() 方法中，在 return 之前添加:

    let ContHeight = this.state.containerHeight + "px";
    let gridHeight = this.state.gridHeight + "px";
    let border = this.state.border + "px solid green";
    let gridStyle = {
       maxHeight: ContHeight,
    };

这些与 css 中使用的样式相同，但它们现在已从 css 中删除并应用了内联样式。

Container 将其最大高度属性设置为:

<div className="gridContainer" style={gridStyle}> //gridStyle defined above.

让我们看看 gridItems 将如何呈现:

//el for element, index for index of the element
   {this.state.items.map((el, index) => { 
            // i now will start from 1 instead of 0
            let i = index + 1,
            // current height is calculating the height of the current item
            // first item will be like: 1*50 + 1*1*2 = 52
            // second item will be like: 2*50 + 2*1*2 = 104
            // and so on
              CurrentHeight =
                i * this.state.gridHeight + i * this.state.border * 2,
            // now we should determine if current height is larger than container height
            // if yes: new Class "hidden" will be added. 
            // and in css we'll style it.
              itemStyle =
                CurrentHeight <= this.state.containerHeight
                  ? "gridItem"
                  : "gridItem hidden";
            return (
              // YOU'RE A GOOD READER IF YOU REACHED HERE! 
              // now styleclass will be added to show-hide the item
              // inline style will be added to make sure that the item will have same height, border-width as in state.
              <div
                className={itemStyle}
                style={{ height: gridHeight, border: border }}
              >
                {el}
              </div>
            );
          })}

终于!在 css 中添加:

.gridItem.hidden {
  display: none;
}

Final Demo 1

Final Demo 2 with 40px gridItem height

Final Demo 3 with 300px container height