CSS 高度溢出问题

Question

我使用图表库 Nivo（我也尝试过其他的，同样的问题）。我有一个内容如标题和统计信息的 DIV。但我不希望它像下面那样悬垂。为什么内容悬空？

<ContentHolder>
    <Title title="Hallo Welt" />

    <div className="widget-stats-holder">
      <div className="widget-inner-stats">
        <ResponsivePie
            data={data}
            margin={{ top: 16, right: 16, bottom: 32, left: 16 }}
            innerRadius={0.5}
            padAngle={1}
            cornerRadius={3}
            />
      </div>
    </div>
</ContentHolder>

Answer 1

在这种情况下，您使用了一种称为“包装器”的东西，或者在您的代码中称为“持有者”div，以围绕内容居中。您是否尝试过在包含内容的 div 上使用“溢出：隐藏”作为 CSS 参数？那应该隐藏小部件标题 div 的突出部分！您需要确保在包含您想要隐藏的所有其他内容的包装器上将溢出设置为隐藏。如果你给你的内容一个“溢出：隐藏”的参数，那么内容就没有什么可隐藏的了，但是如果这有意义的话，它所在的容器就会这样做！

否则，如果您仍然需要表示数据集，您可能必须考虑包含“widget-title”的 div 的最小高度，以免内容过早被截断！