css - 屏幕滚动时 Flex 切断边框

Question

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

Answer 1

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

有几种解决方案可以使 红色边框 随内容变大，这里有 3 种，我在其中使用了您自己的答案中提到的 2 来解释它们的工作原理:

1. 将其移至 main 子级。之所以可行，是因为 flex 元素的行为类似于内联 block ，并随着内容的增长而增长。

2. 通过使用 min-height 代替，使最外层具有非固定高度，在本例中为 layout。这是因为现在允许 flex 容器高于全视口(viewport)。

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