水平滚动的 flexbox 容器不考虑填充

Horizontally-scrolling flexbox container does not respect padding

我正在尝试使用 flexbox 设置页面布局,如下所示:https://jsfiddle.net/axedre/o6xw7pfg/,但我不明白为什么 .main div(根据示例)当 .content div 超出分配的 space.
时,不会在 .content div 的右侧添加填充 您可以通过取消注释 fiddle 的 SCSS 部分中的第 30 行并将 .main div 一直滚动到右侧来明白我的意思。
即使我从 .main 中删除 padding 属性 并将相同的值添加到 .content 上的 margin 属性 我也无法得到期望的结果,即使滚动到 .main.
的右端,在 .content 的右侧也有一个 space 非常感谢任何帮助,干杯!

感谢 this article 解决了这个问题,并记下了这个 css class 的技巧:

.ensure-padding {
    position: relative;
}

.ensure-padding::after {
    content: "";
    position: absolute;
    left: 100%;
    width: 2rem;
    height: 1px;
}

现在只需添加 .ensure-padding class 即可在元素溢出其容器时在元素右侧留下一些 space,如 here 所示。唯一的缺点是 width 属性 在 ::after 伪 class 上的值必须等于 padding-right 属性 的值在 .main 容器上,因此当后者更改时 .ensure-padding 属性 必须相应地更新。

这里有一个简单的修复方法,让 .content 显示为 inline-block 并使用 margin 而不是 padding

这适用于 Firefox、Edge、IE11,但不适用于 Chrome。幸运的是,只需添加一个填充,例如padding-right: 0.1px;,到 .main 解决了这个问题。

Updated fiddle

堆栈片段

body,
html {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  margin: 0;
}

.top {
  border: 2px solid lime;
  display: flex;
  flex: 1;
}
.top .firstcol {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.top .firstcol .header {
  border: 1px solid yellow;
}
.top .firstcol .main {
  border: 1px solid navy;
  flex: 1;
  padding-right: 0.1px;                   /*  fix for Chrome  */
  overflow: auto;
}
.top .firstcol .main .content {
  display: inline-block;                  /*  added  */
  margin: 1rem 2rem;                      /*  added here as margin instead  */
  border: 2px solid maroon;
  width: 1000px;
}

.top .firstcol .footer {
  border: 1px solid magenta;
}
.top .secondcol {
  border: 1px solid red;
}
.top .secondcol .othercontent {
  border: 1px solid yellow;
  width: 350px;
}
<div class="top">
  <div class="firstcol">
    <div class="header">header</div>
    <div class="main">
      <div class="content">content</div>
    </div>
    <div class="footer">
      <code>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</code>
    </div>
  </div>
  <div class="secondcol">
    <div class="othercontent">fixed</div>
  </div>
</div>


另一个解决方案是添加一个额外的包装器,显示为 inline-block,这可能比之前的 hack free

Updated fiddle 2

堆栈片段 2

body,
html {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  margin: 0;
}

.top {
  border: 2px solid lime;
  display: flex;
  flex: 1;
}
.top .firstcol {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.top .firstcol .header {
  border: 1px solid yellow;
}
.top .firstcol .main {
  border: 1px solid navy;
  flex: 1;
  overflow: auto;
}
.top .firstcol .main .fix-right-margin {
  display: inline-block;
}
.top .firstcol .main .content {
  border: 2px solid maroon;
  width: 1000px;
  margin: 1rem 2rem;
}

.top .firstcol .footer {
  border: 1px solid magenta;
}
.top .secondcol {
  border: 1px solid red;
}
.top .secondcol .othercontent {
  border: 1px solid yellow;
  width: 350px;
}
<div class="top">
  <div class="firstcol">
    <div class="header">header</div>
    <div class="main">
      <div class="fix-right-margin">
        <div class="content">content</div>
      </div>
    </div>
    <div class="footer">
      <code>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</code>
    </div>
  </div>
  <div class="secondcol">
    <div class="othercontent">fixed</div>
  </div>
</div>