您可以使用JavaScript实现所需的行为。在这个片段中，我只是为了说明的目的，给“隐藏”项一个低不透明度。显然，您可以在实际应用程序中简单地将隐藏项设置为visibility: hidden或display: none。

const containers = document.querySelectorAll('.container');
containers.forEach(container => hideOverflow(container));

// Hide all overflowing images and portions of text nodes
function hideOverflow(container) {
  container.childNodes.forEach(node => {
    if (node.nodeName !== '#text') {
      if (node.nodeName === 'IMG' ||
          node.querySelector('img') != null) {
        // Hide entire image if it overflows
        if (node.offsetTop + node.offsetHeight > container.offsetHeight) {
          node.classList.add('hidden');
        }
      }
      else {
        // Hide overflowing text characters
        if (node.offsetTop > container.offsetHeight) {
          node.classList.add('hidden');
        }
        else {
          hideChildOverflow(node, container);
        }
      }
    }
  });
}

// Find all descendant text nodes, and hide their overflowing characters
function hideChildOverflow(node, container) {
  if (node.nodeName === '#text') {
    const overflow = document.createRange();
    overflow.setEnd(node, node.length);
    
    // Shrink range until it includes only overflowing characters
    for (let i = 0; i <= node.length; i++) {
      overflow.setStart(node, i);
      
      if (overflow.getBoundingClientRect().top > container.offsetHeight) {
        break;
      }
    }
    
    // Hide the overflowing characters
    const span = document.createElement('span');
    span.classList.add('hidden');
    overflow.surroundContents(span);
  }
  else {
    node.childNodes.forEach(childNode => {
      hideChildOverflow(childNode, container);
    });
  }
}

body {
  display: flex;
}

.container {
  max-height: 200px;
  max-width: 200px;
  border: 1px solid red;
  margin-right: 20px;
}

.hidden {
  opacity: .2;
}

<div class="container">
  <img src="https://picsum.photos/id/237/200/50" width="200" height="50" />
  <p>All of this text is visible, since none of it overflows the container.</p>
  <img src="https://picsum.photos/id/237/200/100" width="200" height="100" />
  <p>This text is below the container, so it gets hidden.</p>
</div>

<div class="container">
  <img src="https://picsum.photos/id/237/200/100" width="200" height="100" />
  <p>The start of this text is visible, but the last part gets hidden since it overflows the bottom of the container. Any piece of text that overflows, even if only partially, gets hidden.</p>
</div>

如果我理解正确的话，那么你的组件的逻辑如下：
1）如果您的文本和图像的高度在200px以内，则正常显示。
2）如果文本或图像太大，无法放入div，则不显示其中之一。
3）如果文本或图像本身太大，无法放入div中，则不显示它们。
如果这是正确的，那么很可能你需要做的是涉及某种JavaScript。
你可以做的是用JavaScript检查这些段落或图像的高度，然后有条件地应用一些css类来隐藏它们。
下面是一个使用Jquery检查段落是否太高的例子：

if( $('.one-specific-paragraph').height > 200 ){ $('.one-specific-paragraph').addClass('hide-paragraph)};

这里的css类类似于.hide-paragraph{display:none;}
然后对图像做同样的事情。您可能需要在forEach循环或类似的东西中执行此操作，以便它检查每个div，而不仅仅是一个。
如果你想同时检查段落和图片的高度，那么你可以执行一个类似于上面例子的if语句，但是在检查它是否超过200px之前，只需要添加两个元素的高度。
希望能帮上忙。