2

I am learning Flexbox and trying to implement by creating a demo portfolio.

I tried this answer to create a fixed sidebar. Then I tried to make sections of my portfolio same dimension using flex: 1, initially it didn't work then I found this answer but it didn't work either.

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>

As you can see in the CSS, .content-container has a height of 100vw if I change it to 100vh then flex:1 inside .home, .about, .skills and .contact won't work but on using 100vw as height, flex:1 works but fixed sidebar doesn't stay fixed anymore.

Is it happening because of flex-flow: column nowrap on the .content-container?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Nick Hill
  • 71
  • 8

3 Answers3

0




<!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>
Code...
  • 104
  • 1
  • 11
0

As you can see in the CSS, .content-container has a height of 100vw if I change it to 100vh then flex:1 inside .home, .about, .skills and .contact won't work but on using 100vw as height, flex:1 works but fixed sidebar doesn't stay fixed anymore.

Is it happening because of flex-flow: column nowrap on the .content-container?

No. It's happening because you're messing with heights across different axes, when you don't even need to add a height (explanation below), and because you're bumping up against the flex minimum size algorithm.

When you use 100vw, the height of .content-container is relative to the width of the viewport ("viewport width"). This throws off the height relative to the actual height of the container. On a wider viewport there will be more height, but flex: 1 will still fail to make each item equal height (explanation below). Also, as you make the viewport narrow, .content-container will gradually disappear (because the vw height keeps decreasing).

When you use 100vh, the height of .content-container is relative to the height of the viewport ("viewport height"). Your child elements will still not be equal height with flex: 1 (explanation below).

Basically, in both cases (vw and vh) flex: 1 fails to achieve your goal. This is because flex items cannot be smaller than their content along the main axis. The default, in column-direction containers, is min-height: auto. You need to override that default with min-height: 0 or overflow with any value other than visible.

Also, because a default setting on flex items is align-items: stretch, you don't need to add a height to .content-container. It will automatically expand across the full height of the 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

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
-1

Do you mean something like this?

* {
  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>
Daniel Rodríguez Meza
  • 1,167
  • 1
  • 8
  • 17