当 flex:1 工作时，固定侧边栏不会保持固定答案

【问题标题】：When flex:1 works fixed sidebar doesn't stay fixed当 flex:1 工作时，固定侧边栏不会保持固定
【发布时间】：2020-02-16 08:28:52
【问题描述】：

我正在学习 Flexbox，并尝试通过创建演示组合来实现。

我试过这个answer 来创建一个固定的侧边栏。然后我尝试使用 flex: 1 使我的投资组合的各个部分具有相同的维度，最初它不起作用，然后我发现了这个 answer 但它也不起作用。

var myDate = new Date();
var hrs = myDate.getHours();

var greet;

if (hrs < 12)
  greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
  greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
  greet = 'Good Evening';

document.getElementById('greet').innerHTML =
  greet + ', visitor! <br><br> Welcome.';

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

.container {
  display: flex;
  flex-flow: row nowrap;
  height: 100vh;
}

.sidebar {
  flex-basis: 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex-basis: 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  height: 100vw;
}

section {
  padding: 10px;
}

.home {
  background-color: red;
  flex: 1;
}

.about {
  background-color: orange;
  flex: 1;
}

.skills {
  background-color: orangered;
  flex: 1;
}

.contact {
  background-color: crimson;
  flex: 1;
}

li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}

a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}

<div class="container">
  <section class="sidebar">
    <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
    <nav class="navbar">
      <ul class="nav-links">
        <li><a href="#home">home</a></li>
        <li><a href="#about">about me</a></li>
        <li><a href="#skills">skills</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
  </section>

  <main class="content-container">
    <section class="home" id="home">
      <h2 id="greet"><span></h2>
                </section>

                <section class="about" id="about">
                    <h2>ABOUT</h2>
                    <h3>
                        <span>Name</span>
        </h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>

    <section class="skills" id="skills">
      <h2>SKILLS</h2>
      <h3>Lorem ipsum dolor sit amet.</h3>
      <ul class=tech-skills>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <h3>Lorem</h3>
      <ul class="languages">
        <li>1</li>
        <li>2</li>
      </ul>
      <h3>Lorem, ipsum.</h3>
      <ul class="learning-skills">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </section>

    <section class="contact" id="contact">
      <h2>CONTACT</h2>
      <p>handle</p>
      <p>phone</p>
      <p>email</p>
    </section>
  </main>
</div>

正如您在 CSS 中看到的，.content-container 的高度为 100vw，如果我将其更改为 100vh，那么 flex:1 在 .home、.about、.skills 和 .contact 内将不起作用，但在使用 100vw 作为高度时，flex:1 有效，但固定侧边栏不再固定。

这是因为.content-container 上的flex-flow: column nowrap 而发生的吗？

【问题讨论】：

标签： html css flexbox

【解决方案1】：



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="stylesheet" href="css/flexbox.css">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap"    
rel="stylesheet">
    <title>Flexbox</title>
</head>

<body>
    <div class="container">
        <section class="sidebar">
            <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
            <nav class="navbar">
                <ul class="nav-links">
                    <li><a href="#home">home</a></li>
                    <li><a href="#about">about me</a></li>
                    <li><a href="#skills">skills</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </nav>
        </section>

        <main class="content-container">
            <section class="home" id="home">
                <h2 id="greet"><span></h2>
            </section>

            <section class="about" id="about">
                <h2>ABOUT</h2>
                <h3>
                    <span>Name</span>
                </h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </section>

            <section class="skills" id="skills">
                <h2>SKILLS</h2>
                <h3>Lorem ipsum dolor sit amet.</h3>
                <ul class=tech-skills>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <h3>Lorem</h3>
                <ul class="languages">
                    <li>1</li>
                    <li>2</li>
                </ul>
                <h3>Lorem, ipsum.</h3>
                <ul class="learning-skills">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </section>

            <section class="contact" id="contact">
                <h2>CONTACT</h2>
                <p>handle</p>
                <p>phone</p>
                <p>email</p>
            </section>
        </main>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

你的意思是这样的吗？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

.container {
  display: flex;
  flex-flow: row nowrap;
  height: 100vh;
}

.sidebar, .sidebar--placeholder {
  flex-basis: 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.sidebar {
  position: fixed;
  width: 25vw;
  height: 100vh;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex-basis: 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  height: 100vw;
}

section {
  padding: 10px;
  flex: 1 1;
  height: 0;
  overflow: hidden;
}

.home {
  background-color: red;
}

.about {
  background-color: orange;
}

.skills {
  background-color: orangered;
}

.contact {
  background-color: crimson;
}

li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}
 
a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
        <title>Flexbox</title>
    </head>

    <body>
        <div class="container">
            <section class="sidebar--placeholder"></section>
            <section class="sidebar">
                <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
                <nav class="navbar">
                    <ul class="nav-links">
                        <li><a href="#home">home</a></li>
                        <li><a href="#about">about me</a></li>
                        <li><a href="#skills">skills</a></li>
                        <li><a href="#contact">contact</a></li>
                    </ul>
                </nav>
            </section>

            <main class="content-container">
                <section class="home" id="home">
                    <h2 id="greet"><span></h2>
                </section>

                <section class="about" id="about">
                    <h2>ABOUT</h2>
                    <h3>
                        <span>Name</span>
                    </h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </section>

                <section class="skills" id="skills">
                    <h2>SKILLS</h2>
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <ul class=tech-skills>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <h3>Lorem</h3>
                    <ul class="languages">
                        <li>1</li>
                        <li>2</li>
                    </ul>
                    <h3>Lorem, ipsum.</h3>
                    <ul class="learning-skills">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </section>

                <section class="contact" id="contact">
                    <h2>CONTACT</h2>
                    <p>handle</p>
                    <p>phone</p>
                    <p>email</p>
                </section>
            </main>
        </div>
    </body>
</html>

<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var greet;

    if (hrs < 12)
        greet = 'Good Morning';
    else if (hrs >= 12 && hrs <= 17)
        greet = 'Good Afternoon';
    else if (hrs >= 17 && hrs <= 24)
        greet = 'Good Evening';

    document.getElementById('greet').innerHTML =
        greet + ', visitor! <br><br> Welcome.';
</script>

【讨论】：

稍微解释一下会有所帮助，技能部分仍然与其他 3 部分不同。
@NickHill 我刚刚编辑了我的答案，这是您需要的吗？如果是我会提供解释：3

【解决方案3】：

正如您在 CSS 中看到的，.content-container 的高度为 100vw，如果我将其更改为 100vh，那么 flex:1 在 .home、.about、.skills 和 .contact 内将不起作用，但在使用 100vw 作为高度时，flex:1 有效，但固定侧边栏不再固定。

这是因为.content-container 上的flex-flow: column nowrap 而发生的吗？

没有。发生这种情况是因为您在不同轴上弄乱了高度，甚至不需要添加高度（下面的解释），并且因为您遇到了 flex 最小尺寸算法。

当您使用100vw 时，.content-container 的高度是相对于视口的宽度（“视口宽度”）而言的。这会抛出相对于容器实际高度的高度。在更宽的视口上会有更高的高度，但flex: 1 仍然无法使每个项目的高度相等（解释如下）。此外，当您缩小视口时，.content-container 将逐渐消失（因为vw 的高度不断降低）。

当您使用100vh 时，.content-container 的高度是相对于视口的高度（“视口高度”）。您的子元素的高度仍不会与 flex: 1 相等（解释如下）。

基本上，在这两种情况下（vw 和 vh）flex: 1 都无法实现您的目标。这是因为flex items cannot be smaller than their content along the main axis。在列方向容器中，默认值为min-height: auto。您需要使用除可见之外的任何值覆盖该默认值，使用 min-height: 0 或 overflow。

另外，因为弹性项目的默认设置是align-items: stretch，所以您不需要为.content-container 添加高度。它会自动扩展到容器的整个高度。

var myDate = new Date();
var hrs = myDate.getHours();

var greet;

if (hrs < 12)
  greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
  greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
  greet = 'Good Evening';

document.getElementById('greet').innerHTML =
  greet + ', visitor! <br><br> Welcome.';

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex: 0 0 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex: 0 0 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  /* height: 100vh */
}

section {
  padding: 10px;
}

.home {
  background-color: red;
  flex: 1;
  min-height: 0; /* new */  
}

.about {
  background-color: orange;
  flex: 1;
  overflow: hidden; /* new */  
}

.skills {
  background-color: orangered;
  flex: 1;
  overflow: auto; /* new */  
}

.contact {
  background-color: crimson;
  flex: 1;
  min-height: 0; /* new */  
}


li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}

a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

<div class="container">
  <section class="sidebar">
    <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
    <nav class="navbar">
      <ul class="nav-links">
        <li><a href="#home">home</a></li>
        <li><a href="#about">about me</a></li>
        <li><a href="#skills">skills</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
  </section>

  <main class="content-container">
    <section class="home" id="home">
      <h2 id="greet"></h2>
    </section>

    <section class="about" id="about">
      <h2>ABOUT</h2>
      <h3>
        <span>Name</span>
      </h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>

    <section class="skills" id="skills">
      <h2>SKILLS</h2>
      <h3>Lorem ipsum dolor sit amet.</h3>
      <ul class=tech-skills>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <h3>Lorem</h3>
      <ul class="languages">
        <li>1</li>
        <li>2</li>
      </ul>
      <h3>Lorem, ipsum.</h3>
      <ul class="learning-skills">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </section>

    <section class="contact" id="contact">
      <h2>CONTACT</h2>
      <p>handle</p>
      <p>phone</p>
      <p>email</p>
    </section>
  </main>
</div>

jsFiddle demo

【讨论】：