Question

我正在尝试使用flexbox设置页面布局，例如此处所示的页面布局：https://jsfiddle.net/axedre/o6xw7pfg/，但我无法弄清楚为什么.main div（根据示例）当.content div超出分配的空间时，不要在.main div的右侧添加填充您可以通过在小提琴的SCSS部分中取消注释第30行并将padding div一直向右滚动来查看我的意思。
即使我从.main移除margin属性并将相同的值添加到.content上的.content属性，也无法获得所需的结果，即.main右侧的空格，即使其中一个滚动到{{1}}的右端。
非常感谢任何帮助，干杯！

Answer 1

以下是一个简单的解决方法，将.content显示为inline-block并使用margin代替padding

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

Updated fiddle

Stack snippet

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

另一个解决方案是添加一个额外的包装器，显示为inline-block，它可能比以前更多 hack free 。

Updated fiddle 2

Stack snippet 2

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

感谢this article想出来，并记下了这个诀窍的css类：

.ensure-padding {
    position: relative;
}

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

现在只需要添加.ensure-padding类，以便在元素溢出其容器时在元素的右侧留出一些空间，如图here所示。唯一的缺点是width伪类的::after属性值必须等于padding-right容器上.main属性的值，所以当后者更改.ensure-padding属性必须相应更新。

水平滚动的flexbox容器不支持填充

2 个答案: