CSS高度溢出问题

问题描述

我使用图表库 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>

解决方法

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

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

height height nivo-react