Question

您好我有以下HTML代码（此处为＆＃34;正在工作＆＃34; 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

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

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

将其移至main个孩子。这项工作是因为flex项的行为类似于内联块，并随着内容的增长而增长。
通过使用layout，使最外面的高度具有非固定高度，在本例中为min-height。现在允许这个作为flex容器的工作高于完整视口。
由于弹性项默认值为main，flex: 0 1 auto不允许增长但允许缩小，因此将其设置为flex: 1 0 auto这些条款被交换了。

Stack snippet 1

＆＃13;

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

＆＃13;

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

＆＃13;

Stack snippet 2

＆＃13;

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

＆＃13;

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

＆＃13;

Stack snippet 3

＆＃13;

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

＆＃13;

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

＆＃13;

当谈到为什么额外的div缠绕在menu__item工作时，是因为默认情况下弹性项总是尝试缩小到适合，因为它默认为至flex: 0 1 auto，但同时不会小于其内容，因为它是额外的div flex项目，其大小内容，它可以。

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

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不知道为什么chrome会以这种方式表现，但我们至少可以解决两个问题：

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

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

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

当屏幕滚动时，Flex会切断边框

2 个答案: