子 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; }