水平滚动的 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
解决了这个问题。
堆栈片段
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。
堆栈片段 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>
我正在尝试使用 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
解决了这个问题。
堆栈片段
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。
堆栈片段 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>