子 div 溢出父 div

Question

我有 3 組復選框，前兩個具有固定寬度，最后一個應占用剩余空間。 在最后一組中，如果名稱很長，則該組會出現水平滾動。

但是，最后一組在這里溢出了父 div。 我怎樣才能解決這個問題？

Answer 1

您只需將overflow: auto添加到父容器.select__content ，這樣當內容太大而無法容納其塊格式化上下文並溢出時，滾動條就會出現，並且容器.select__content容器變得可滾動。 試試這個。

.select__content {
  margin-top: 2px;
  display: flex;
  overflow: auto;
}

這是更新的CodeSandbox 演示。

Answer 2

.select_checkbox 采用寬度 auto 增長，因為 span 元素很長。 可以通過給.select_checkbox 一個最大寬度來解決，這樣它就不會超出指定的寬度並且可能會出現滾動條。 嘗試像這樣添加最大寬度。

 .select__checkbox { border: 2px solid lightgray; display: flex; flex-direction: column; max-width: 260px; }