含预格式化空白的内层div不遵循父元素右padding问题求助

问题原因 #

当内层div设置white-space: pre后，它的宽度完全由内容长度决定，不会受父元素的padding约束。父元素开启overflow-x: auto触发滚动时，内层内容会直接顶到父元素内容区域的最右边缘，看起来像是忽略了父元素的右padding——本质是父元素的padding属于内容区域外的空间，内层元素的宽度计算不会包含这部分。

两种可行修复方法 #

方法一：给内层元素添匹配的右内边距 #

直接给.inner设置和父元素相同的右padding，让内容滚动到最右侧时仍保留间隔：

.outer {
  width: 10rem;
  overflow-x: auto;
  background: grey;
  padding: 3rem;
  border-radius: 1rem;
}

.inner {
  white-space: pre;
  padding-right: 3rem; /* 和父元素padding值一致 */
}

方法二：将内层元素设为行内块元素 #

把.inner改成inline-block，让它自适应内容宽度的同时，自动尊重父元素的padding范围：

.outer {
  width: 10rem;
  overflow-x: auto;
  background: grey;
  padding: 3rem;
  border-radius: 1rem;
}

.inner {
  white-space: pre;
  display: inline-block;
}

这两种方法都能满足需求：预格式化文本保持不换行、支持水平滚动，同时四边都有完整的内边距。

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