屏幕滚动时Flex切断边框答案

【问题标题】：Flex cut off border when screen scroll屏幕滚动时Flex切断边框
【发布时间】：2017-10-26 19:20:13
【问题描述】：

您好，我有以下 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 上，当屏幕高度小于左侧菜单并出现滚动条时，向下移动滚动条时菜单右边框（红色）将不会呈现。期望的行为是在垂直菜单的末尾绘制红色边框（所以如果我们移动滚动条，我们应该总是看到红色边框）。怎么做？

【问题讨论】：

标签： css google-chrome flexbox border

【解决方案1】：

这是块元素的默认行为。它们变得和它们的父元素一样高或宽，另一方面，它们随着内容而增长。

有几种解决方案可以使 红色边框 大小与内容一起使用，这里有 3 个，我使用了您自己的答案中提到的 2 个来解释它们的工作原理：

将其移至main 孩子。这是因为弹性项目表现得像内联块，并且随着它们的内容而增长。
通过使用min-height 来使最外层具有非固定高度，在本例中为layout。现在允许这项作为 flex 容器的工作高于完整视口。
main 不允许增长，但允许缩小，因为弹性项目默认值为flex: 0 1 auto，因此通过将其设置为flex: 1 0 auto，这些术语被交换。

堆栈 sn-p 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>

堆栈 sn-p 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>

堆栈 sn-p 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: 0 1 auto ，但同时不会小于它的内容，而且由于它是额外的div，即flex item，具有大小的内容，它可以。

当您使用上面的选项 3 时，它会在没有 div 包装器的情况下开始工作，因为现在 main 可以随其内容增长，这将使 menu__item 保持其高度。

堆栈sn-p

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

【讨论】：

【解决方案2】：

我不知道chrome为什么会这样，但我们至少可以有两种解决方案：

将.layout 类中的height: 100vh; 更改为min-height: 100vh;
将flex: 1 0 auto; 添加到.main 类

可能有人可以解释为什么 chrome 会这样以及为什么上述解决方案有效？

我也想知道为什么如果我改变 <div><div class="menu__item">Item</div></div> 到<div class="menu__item">Item</div> 所有项目都会被压缩到屏幕大小？（在这种情况下，滚动条（和问题）会消失，但不会以可接受的方式消失）

【讨论】：