带有预格式化空白的内部div不尊重父级的右填充

Question

我的目标是让一些预先格式化的文本适应水平滚动的div，同时在所有方面都进行填充。然而，我的代码中的内部div不尊重父级的正确填充，我不知道为什么。

这个问题似乎与Pre元素不尊重右填充密切相关，然而，这个问题和答案都来自2012年，那里的答案中没有代码，到jsfiddle的链接也死了，所以它实际上是无用的

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

<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

您可以将子级的宽度设为fit-content:

.outer {
width: 10rem;
overflow-x: auto;
background: grey;
border-radius: 1rem;
padding: 3rem;
}
.inner {
white-space: pre;
width: intrinsic; /* Safari (?) */
width: -moz-fit-content; /* Firefox */
width: fit-content; 
}

<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>