子 div 溢出父 div

Question

我有 3 组复选框，前两个为固定宽度，最后一个应占用剩余空间。在最后一组中，如果名称很长，则该组出现水平滚动。

然而，最后一组溢出父 div here。我该如何解决这个问题？

Answer 1

您只需要将overflow: auto添加到父容器.select__content中，这样当内容太大而无法放入其block formatting context并溢出时，滚动条出现并且容器{{ 1}} 容器变为可滚动。试试这个。

.select__content

这是更新后的 CodeSandbox demo。

Answer 2

.select_checkbox 的宽度 auto 会因为 span 元素很长而增长。可以通过给 .select_checkbox 一个 max-width 来解决它，这样它就不会超过指定的宽度并且可能会出现滚动条。尝试像这样添加最大宽度。

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