我正在尝试在包装器中嵌套两个子元素，该包装器指定侧边距，以便当显示狭窄时在其内容和屏幕侧面之间有一个空间，max-width而当显示较宽时则用于一个。
第二个孩子会有一些溢出，这应该是可见的，而第一个孩子应该严格位于包装器的内容框中。在删除第一个孩子的情况下，第二个孩子的行为符合预期。但是，当我添加第一个孩子时，它似乎完全忽略了包装器的边距，拉伸了包装器的内容框，并破坏了第二个孩子。
应用于overflow: hidden包装程序可以解决页边距问题，但可以裁剪第二个孩子。将边距应用于第一个孩子并不会使其与父对象一起折叠，因为它处于新的块格式上下文中。
到目前为止，我发现的唯一解决方法是：
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
并将包装器的最大宽度增加3rem，但我希望有一些解决方案不需要我将包装器的边距转移到其子级。
https://codepen.io/HybridCore/pen/jjoWmd
.wrapper {
> * {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
body {
background-color: #000;
color: #FFF;
display: flex;
justify-content: center;
}
.wrapper {
margin: 0 1.5rem;
max-width: 40rem;
width: 100%;
}
.fit_content_box {
display: flex;
align-items: center;
}
.L {
min-width: 0;
flex: 1 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.R {
margin-left: 1rem;
height: …