如何防止元素超出其祖父母的邊界？-有解無憂

當元素是帶有max-width集合的容器的直接子元素時，我已經看到類似的問題得到了回答，但在我的情況下，我有一個包含動態內容的 div，其中還有另一個 div，它是一個不斷增長的串列。我需要這個內部 div 增長，直到根 div 達到它max-height，然后切換到溢位。

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 150px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: inherit;
  overflow-y:auto;
}

#anotherdiv {
  max-height: inherit;
}

<div id="topDiv">
  <p>
  First paragraph
  </p>
  <div id="anotherdiv">
   <div id="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
  </div>
  <p>
   Final paragraph
  </p>
</div>

uj5u.com熱心網友回復：

您可以簡單地添加overflow-y: auto到#topDiv.

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 150px;
  width: 100%;
  padding: 10px;
  overflow-y: auto;
}

#insideDiv {
  background-color: pink;
  max-height: inherit;
  overflow-y: auto;
}

#anotherdiv {
  max-height: inherit;
}

<div id="topDiv">
  <p>
    First paragraph
  </p>
  <div id="anotherdiv">
    <div id="insideDiv">
      Some inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br> More inside content
      <br>
    </div>
  </div>
  <p>
    Final paragraph
  </p>
</div>

uj5u.com熱心網友回復：

為此，您可以將 max-height 設定為 on#insideDiv而不是#topDiv.

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: inherit;
  overflow-y:auto;
  max-height: 150px;
}

#anotherdiv {
  max-height: inherit;
}

<div id="topDiv">
  <p>
  First paragraph
  </p>
  <div id="anotherdiv">
   <div id="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
  </div>
  <p>
   Final paragraph
  </p>
</div>

uj5u.com熱心網友回復：

#anotherdiv {
  max-height: 400px;
 overflow-y: auto;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478809.html

標籤：css

上一篇：如何將標簽與復選框關聯但不使用“for=id”

下一篇：如何將文本區域的標簽相對于該文本區域居中對齊？