子元素超过父div的长度

Question

我的孩子的div超出了我的父div的长度，我不知道如何解决。我需要如果<p>元素超过了父div的长度，那么超出的长度应该被隐藏或不在div中显示。

请找到相同的问题

#parent {
  border: 3px solid #f0f
}

#child2 {
  padding: 50px;
  background: cyan;
  height: 30px;
}

<div id="parent">
  <div id="child2">
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
  </div>
</div>

Answer 1

您不应设置height。那是你的问题。删除height: 30px;将使其起作用。如果要隐藏它，请使用overflow: auto;或overflow: scroll;。

以下代码段为您提供了理想的解决方案：

#parent {
  border: 3px solid #f0f
}

#child2 {
  padding: 50px;
  background: cyan;
  height: 30px;
  overflow: auto;
}

<div id="parent">
  <div id="child2">
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
    <p>
      Hi! 50px of padding, and it's working!
    </p>
  </div>
</div>