Javascript CSS Flex+；固定尺寸容器高度+；由于溢出而禁用部分绘制的项目：隐藏

我会尽量简化我的问题：

我有一个固定高度为200px的div容器。在里面，我有一个显示垂直项目的flexbox。每个项目都有固定的高度，不应改变。我使用

overflow:hidden

来防止最后一项从200px中断。这很有效

这就是我的

溢出：隐藏


这是我在没有溢出的情况下所拥有的
隐藏的


但现在，我想向前迈出一步，防止最后一个项目的渲染，如果它即将被剪切，并且由于容器固定高度限制和溢出：隐藏

这是我真正想要的，只显示那些没有被溢出完全或部分切割的项目：隐藏


实现这一目标的最佳实践是什么？一种“确保所有项目都适合固定高度组件内的固定高度，如果其中一项不适合，则根本不显示它”

使用最新的反应。也许没关系，但仍然如此

我在这里举了一个小例子。

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

请注意，200px flexbox高度和50px项目高度仅为示例。事实上，我需要一个flexbox，可以删除任何不完全适合它的项目。。。flexbox的最大高度或元素的最小高度在运行时之前是未知的
 为什么不使用
document.getElementById（'element'）.clientHeight测试元素
检查容器大小，找出哪个元素可见或不可见
 第一件事：您应该从使用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>
    );
  }

在返回之前的
render（）
方法中添加以下内容：

    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中删除，并与内联样式一起应用

容器
将其最大高度属性设置为：

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


终于！在css中添加以下内容：

.gridItem.hidden {
  display: none;
}




您可以使用flexbox列将溢出的项目发送到另一列，并将宽度设置为容器的宽度以隐藏项目，如果您想通过问题中提到的简单flexbox css属性实现这一点

.gridContainer{
显示器：flex；
弯曲方向：立柱；
背景：黄色；
最大高度：200px；
溢出：隐藏；
柔性包装：包装；
宽度：52px；
}

唯一的区别是，您不会看到gridContainer的黄色背景，但可以像下图一样在封闭的div中设置背景，但它将适应子div的高度。
使用Javascript实现这一点的最简单方法是使用Intersection Observer API。我不知道是否有一种纯粹的CSS方法可以做到这一点。“我希望继续强制执行flexbox的最大高度为200px，但有某种自动化，可以杀死所有部分或完全不可见的元素……”。我添加了JavaScript标记。酷。谢谢我已经实现了类似的功能，但是它支持多列Flexbox（如果视口宽度允许的话）。我希望会有一个神奇的CSS，比如
flex-cut-overflow-items:{none，true，partials}
，但事实证明它并不存在。。。也许应该。无论如何谢谢你的努力。不客气。。。不幸的是，没有这样的css属性：）
//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>
            );
          })}


.gridItem.hidden {
  display: none;
}