如何让inner div完全被outer div包含，避免内容溢出？

我希望.inner（子元素）能够完全被.outer（容器）包含，即便是.inner中的内容发生溢出，也不会超出.outer的padding区域。期望.inner可根据内容需求自适应高度，尝试过多种overflow设置，也用border替代过padding，但.inner始终溢出.outer，寻求解决方案。

当前代码 #

CSS #

.inner {
  /* Overflow */
  overflow-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  color: white;
}

.outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
  padding-top: 15px;
  padding-bottom: 15px;
  overflow: hidden
}

HTML #

<div class="outer">
  <div class="inner">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
  </div>
</div>

解决方案 #

问题根源是.outer设置了固定height:100px，而CSS默认盒模型中，padding是额外计算在高度之外的，这意味着.outer的内容区域高度实际为100px - 15px*2 = 70px，当.inner内容高度超过70px时就会溢出。提供两种可行方案：

方案一：容器自适应高度（保留最小高度） #

去掉.outer的固定高度，改用min-height，让容器根据内容自动撑开，同时保持最小高度要求：

.inner {
  overflow-wrap: break-word;
  word-break: break-all;
  color: white;
}

.outer {
  width: 100px;
  min-height: 100px;
  display: inline-block;
  background-color: black;
  padding-top: 15px;
  padding-bottom: 15px;
}

方案二：固定容器总高度（padding计入总高度） #

如果必须保持容器总高度为100px，使用box-sizing: border-box让padding计入总高度，同时限制.inner的最大高度：

.inner {
  overflow-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  color: white;
  max-height: 100%;
}

.outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
  padding-top: 15px;
  padding-bottom: 15px;
  box-sizing: border-box;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者h-k-dev