Bootstrap 4自定义复选框溢出容器：如何让容器高度包含子元素？

我来帮你捋捋这个问题——你遇到的容器溢出、高度塌陷的问题，根源在于绝对定位的.custom-control-indicator脱离了文档流，导致你的.SamCheckbox容器没法感知它的高度，自然就会出现子元素跑出去、容器高度不对的情况，你加的min-height只是临时的 workaround，确实没必要留着。

下面是具体的修复方案，一步步来：

核心思路 #

绝对定位元素不会占据文档流空间，所以容器无法自动计算高度。我们需要让容器能“抓住”这个自定义指示器的高度，同时保持自定义样式的完整性。

修改后的代码 #

HTML（无需改动） #

<div class="SamCheckbox custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="sam-check-1" value="18">
  <i class="custom-control-indicator"></i>
</div>

CSS（关键修改） #

.SamCheckbox {
  /* 去掉原来的 min-height:34px !important */
  position: relative; /* 让内部绝对定位元素相对这个容器定位（如果需要保留绝对定位的话） */
  display: inline-block; /* 让容器自适应子元素的宽高，避免撑满整行 */

  &.custom-checkbox {
    .custom-control-input {
      display: none;

      & ~ .custom-control-indicator {
        background: none;
        border: 1px solid #333;
        color: blue;
        font-size: 1.6rem;
        width: 36px;
        height: 36px;
        /* 把绝对定位改成static，让元素回到文档流，容器就能感知它的高度 */
        position: static;
        /* 用Flex布局替代原来的before定位，让勾选标记居中 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &:checked ~ .custom-control-indicator {
        border: 1px solid #999;
        background: none;
      }

      &:disabled ~ .custom-control-indicator {
        border: none;
        background: none;
      }
    }
  }
}

为什么这样改？ #

1. 移除min-height：让容器高度由子元素自动决定，更符合布局逻辑；
2. 添加display: inline-block：避免容器默认撑满整行，同时让它能包裹住内部的36px高度的指示器；
3. 调整指示器的定位方式：把position: absolute改成static，让它回到文档流，这样容器就能正确计算高度，不会出现溢出；
4. 用Flex居中替代::before定位：原来的top:5px; left:5px是硬编码的居中方式，用Flex布局更灵活，也能避免定位偏差。

如果你一定要保留指示器的绝对定位（比如有特殊布局需求），那可以保留position: absolute，但要给.SamCheckbox添加height: 36px（和指示器高度一致），同时设置position: relative，这样指示器会相对容器定位，容器也有足够的高度包裹它，不过这种方式不如用Flex灵活。

内容的提问来源于stack exchange，提问作者olefrank