您好,我有以下 HTML 代码(这里是“工作”example)
<div class="layout">
<main class="main">
<nav class="menu">
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
</nav>
<section class="main__content">
Some Content
</section>
</main>
</div>
风格:
.layout {
height: 100vh;
display: flex;
flex-direction: column;
}
.main {
display: flex;
}
.menu {
display: flex;
border-right: solid 3px red;
width: 258px;
flex-direction: column;
}
.menu__item {
height: 340px;
width: 240px;
margin: 10px;
background: #aaaaaa;
}
问题是在 Chrome 上,当屏幕高度小于左侧菜单并出现滚动条时,当滚动条向下移动时,菜单右边框(红色)将不会呈现。期望的行为是在垂直菜单的末尾绘制红色边框(因此如果我们移动滚动条,我们应该总是看到红色边框)。怎么做?
最佳答案
这是 block 元素的默认行为。它们变得与其父元素一样高或宽,另一方面,内联元素,它们随着内容而增长。
有几种解决方案可以使 红色边框 随内容变大,这里有 3 种,我在其中使用了您自己的答案中提到的 2 来解释它们的工作原理:
将其移至
main
子级。之所以可行,是因为 flex 元素的行为类似于内联 block ,并随着内容的增长而增长。通过使用
min-height
代替,使最外层具有非固定高度,在本例中为layout
。这是因为现在允许 flex 容器高于全视口(viewport)。main
不允许增长但允许收缩,因为 flex 元素默认值为flex: 0 1 auto
,所以通过设置它到flex: 1 0 auto
这些术语被交换了。
堆栈片段 1
.layout {
height: 100vh;
display: flex;
flex-direction: column;
}
.main {
display: flex;
}
.menu {
display: flex;
width: 258px;
flex-direction: column;
}
.menu > div {
border-right: solid 3px red;
}
.menu__item {
height: 340px;
width: 240px;
margin: 10px;
background: #aaaaaa;
}
<div class="layout">
<main class="main">
<nav class="menu">
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
</nav>
<section class="main__content">
Some Content
</section>
</main>
</div>
堆栈片段 2
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main {
display: flex;
}
.menu {
display: flex;
width: 258px;
flex-direction: column;
border-right: solid 3px red;
}
.menu__item {
height: 340px;
width: 240px;
margin: 10px;
background: #aaaaaa;
}
<div class="layout">
<main class="main">
<nav class="menu">
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
</nav>
<section class="main__content">
Some Content
</section>
</main>
</div>
堆栈片段 3
.layout {
height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1 0 auto;
display: flex;
}
.menu {
display: flex;
width: 258px;
flex-direction: column;
border-right: solid 3px red;
}
.menu__item {
height: 340px;
width: 240px;
margin: 10px;
background: #aaaaaa;
}
<div class="layout">
<main class="main">
<nav class="menu">
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
<div><div class="menu__item">Item</div></div>
</nav>
<section class="main__content">
Some Content
</section>
</main>
</div>
当谈到为什么额外的 div
包裹在 menu__item
工作时,是因为默认情况下 flex 元素总是尝试收缩以适应 因为它默认为 flex: 0 1 auto
,但同时不会小于它的内容,因为它是额外的 div
flex item,具有一定大小的内容,它可以。
当您使用上面的选项 3 时,它会在没有 div
包装器的情况下开始工作,因为现在 main
可以随其内容增长,这将使menu__item
保持其高度。
堆栈片段
.layout {
height: 100vh;
display: flex;
flex-direction: column;
}
.main {
flex: 1 0 auto;
display: flex;
}
.menu {
display: flex;
width: 258px;
flex-direction: column;
border-right: solid 3px red;
}
.menu__item {
height: 340px;
width: 240px;
margin: 10px;
background: #aaaaaa;
}
<div class="layout">
<main class="main">
<nav class="menu">
<div class="menu__item">Item</div>
<div class="menu__item">Item</div>
<div class="menu__item">Item</div>
<div class="menu__item">Item</div>
</nav>
<section class="main__content">
Some Content
</section>
</main>
</div>
关于css - 屏幕滚动时 Flex 切断边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46949526/