How to Have a Position: Fixed; Behaviour for a Flexbox Sized Element

How can I have a position: fixed; behaviour for a flexbox sized element?

You can't.

As explained by the CSS2.1 spec:

Absolutely positioned boxes are taken out of the normal flow.

And the Flexible Box Layout spec confirms that:

An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.

^{(Emphasis mine)}

How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

Edit:

A solution that somehow feels less hacky could be to make the container (.wrapper) as tall as the screen, and only add scrolling to the main <section> element:

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

section {
    flex: 1 1 auto;
    overflow: auto;
}

http://codepen.io/Sphinxxxx/pen/WjwbEO

Original answer:

You could simply put everything inside <nav> in a wrapper (here: nav-wrapper), and then fix that wrapper:

...
.nav-wrapper {
    position: fixed;
    top: 0; left: 0;
}

<nav role="navigation">
    <div class="nav-wrapper">
        ...
    </div>
</nav>

http://codepen.io/anon/pen/PqXYGM

How to position: fixed the navbar when using flexbox

Display:flex and position:fixed does not go well together.

you can make little changes and make it look like this

Check the following snippet

/* Clear formatting*/
* {  box-sizing: border-box;  margin: 0;  padding: 0;}/* Remove formatting from links*/
a {  color: inherit;  text-decoration: none;}/* Set a max width to the content*/
.wrapper {  max-width: 960px;  margin: 0 auto;  background-color: pink;  display: flex;  flex-direction: column;  /*height: 100vh;  */}.parent {  position: fixed;  top: 0;  left: 0;  margin: auto;  width: 100%;}.navbar {  display: flex;  justify-content: space-between;  background-color: yellow;  /*   */}.logo {  padding: 20px;}.menu {  display: flex;  align-items: center;}.menu ul {  display: flex;  justify-content: flex-end;  align-items: center;  list-style: none;  background-color: grey;}.menu li {  padding: 20px;  margin-left: 20px;  background-color: orange;  color: rgba(255, 0, 0, 0.9);  font-size: 16px;  font-weight: bold;}

<div class="parent">  <div class="navbar">    <div class="logo">      <picture>        <img src="http://fillmurray.com/50/50" alt="logo">      </picture>    </div>    <div class="menu">      <ul>        <li><a href="#home">Home</a>        </li>        <li><a href="#about">About</a>        </li>        <li><a href="#contact">Contact</a>        </li>      </ul>    </div>  </div></div>
<div class="wrapper">  <div style="height: 2000px"></div></div>

How to use position fixed in flex layout?

If I understand your requirements, you want make the right scroll and the left be fixed. That can be done without the use of fixed position.

I would also personally recommend to not use fixed position, unless it is absolutely necessary, as it can have some unwanted behavior on mobile device, and you kind of loose the benefit non positioned solutions like flexbox offer.

html, body {  margin: 0;}#parent {  display: flex;  height: 100vh;}#left {  flex-grow: 1;  background: blue;}#right {  flex-grow: 5;  background: red;  overflow: auto;}#right div {  height: 300vh;}

<div id="parent">  <div class="child" id ="left">      ABC  </div>  <div class="child" id ="right">    <div>      DEF    </div>  </div></div>

How to keep the left and right flex elements (sidebars) fixed while the middle element scrolls, with the scroll bar on the right?

If you are thinking of using flexbox, here is the solution to make this layout work.
Use the property of position: sticky; , It will give you the behavior you want in there.

  body {
  width: 100%;
}

main {
  display: flex; 
  justify-content: space-between;
}

article {
  border: 1px solid black;
  width: 600px;
}

aside {
  border: 1px solid red;
  height: 100vh;
  flex: 1;
  position:sticky;
  top:0;
}

How to make part of a flexbox layout become sticky?

There is no incompatibility when a flexbox container has a fixed positioned parent.

The only problems with your code are:

position: fixed removes the element from the flow, so following elements jump up to take its space. You can counteract this by adding a bottom margin to the previous element.
When a fixed positioned element has all width, left and right set to auto, then its width will be the minimum required by the content, instead of the width of its containing block.

So you can use:

var cond = $(window).scrollTop() > $('#sticky-anchor').offset().top;
$('#wrapper').toggleClass('stick', cond);
$('#sticky-anchor').css({
  marginBottom: cond ? $('#wrapper').outerHeight() + 'px' : 0
});

#wrapper.stick {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

function sticky_relocate() {  var cond = $(window).scrollTop() > $('#sticky-anchor').offset().top;  $('#wrapper').toggleClass('stick', cond);  $('#sticky-anchor').css({    marginBottom: cond ? $('#wrapper').outerHeight() + 'px' : 0  });}$(function() {  $(window).scroll(sticky_relocate);  sticky_relocate();});

/* layout CSS */body {  margin: 0;}.flexBox {  display: flex;  height: 200px;  }.left_side {  width: 200px;}.right_side {  flex: 1;}#left1 {background-color:red;}#right1 {background-color:blue;}#left2 {background-color:green;}#right2 {background-color:black;}#contents {  background-color:orange;  height: 1000px;}
/* Sticky CSS */#wrapper.stick {  position: fixed;  top: 0;  left: 0;  right: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="flexbox1" class="flexBox">  <div id="left1" class="left_side"></div>  <div id="right1" class="right_side"></div></div><div id="sticky-anchor"></div><div id="wrapper">  <div id="flexbox2" class="flexBox">    <div id="left2" class="left_side"></div>    <div id="right2" class="right_side"></div>  </div></div><div id="contents">  Lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. An nec discere accusam recusabo, usu iudico habemus ponderum ex. Cu vis vitae libris temporibus, pri simul nominavi et. No omittantur disputationi vis, pro ei putent noluisse eleifend. Utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/>
  Sit et error alterum. Euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. Pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. Eos ea labores adolescens consetetur. Ex ius inermis percipit theophrastus, sed id agam expetendis.<br/>
  Ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. Ei alii probo timeam vix, vim ad erat magna. Ne qui posse dicta labores. Sea ut eius percipit. Mel et nullam praesent forensibus. Purto comprehensam qui ex, facer mandamus principes at vix.<br/>
  Alii doctus audire qui at. Dicunt sapientem et mei, per at falli fierent. Et case singulis cum, et natum expetendis sea. Deleniti deseruisse vel ne. Pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. Eam an qualisque quaerendum, sale homero perpetua an eam. Ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/>
  Ut aperiri feugiat elaboraret sed, an nec nihil choro tibique. Tale regione accumsan ex sea. Mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. In clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. Tation aliquid eu est, dolorem molestie assentior ea vis. Minimum percipit at mea, vel mollis ornatus imperdiet eu. Te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae.</div>

My position: sticky element isn't sticky when using flexbox

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

.flexbox-wrapper {  display: flex;  overflow: auto;  height: 200px;          /* Not necessary -- for example only */}.regular {  background-color: blue; /* Not necessary -- for example only */  height: 600px;          /* Not necessary -- for example only */}.sticky {  position: -webkit-sticky; /* for Safari */  position: sticky;  top: 0;  align-self: flex-start; /* <-- this is the fix */  background-color: red;  /* Not necessary -- for example only */}

<div class="flexbox-wrapper">  <div class="regular">    This is the regular box  </div>  <div class="sticky">    This is the sticky box  </div></div>

Flex layout strange behavior when set the height in one of the elements

Your container is set to be positioned 60px from the bottom of the document, however the footer is only 50px in height, leaving a 10px gap.

I would recommend reading this guide on flexbox, as it include an example at the bottom similar to what you are trying to achieve without the unnecessary use of positioning.

Not sure how to change the behavior of my CSS Grid

Just add align-items: flex-start to body. This working fine.

const logo = document.querySelector(".logo-link img"),
  myNav = document.querySelector(".main-navbar"),
  navigationToggler = document.querySelector(".nav-toggler"),
  dropShadow = document.querySelector("#dropshadow"),
  hamburgerBtn = document.querySelector(".hamburger");

window.onscroll = scrolled;



function scrolled() {
  if ((document.body.scrollTop >= 10 || document.documentElement.scrollTop >= 10)) {
    logo.src = "../imgs/logo/logo-lightgrey.png";
    myNav.classList.add("scroll");
  } else if (hamburgerBtn.className.includes("is-active") == 0) {
    logo.src = "../imgs/logo/logo-black.png";
    myNav.classList.remove("scroll");
  }
};

hamburgerBtn.addEventListener('click', hamburgerToggled);

function hamburgerToggled() {
  if (hamburgerBtn.className.includes("is-active") != 0) {
    myNav.classList.remove("navbar-override");
    dropShadow.classList.remove("drop-shadow");
    dropshadow.style.display = "none";
    hamburgerBtn.classList.remove("is-active");

    scrolled();

  } else {
    myNav.classList.add("navbar-override");
    dropShadow.classList.add("drop-shadow");
    dropshadow.style.display = "block";
    hamburgerBtn.classList.add("is-active");
    logo.src = "../imgs/logo/logo-lightgrey.png";
  }
}

body {
  font-family: 'Roboto', sans-serif;
  background-image: url("../imgs/general-bg/subtle-pattern.png");
  margin: 0;
  display: grid;
  grid-template-rows: 4rem 25rem auto 4rem;
  grid-template-areas: "header" "hero-section" "main-content" "footer";
  min-height: 100vh;
  justify-content: center;
  align-items: flex-start;
}

.about-us__hero-section {
  grid-area: hero-section;
  background-image: url(https://serving.photos.photobox.com/68808029c7b0524783bf789e026f6ff67adc1cd6c7e8c75c22b01f97caf5a1b264747b1f.jpg);
  background-size: cover;
  background-position: 8%;
  background-repeat: no-repeat;
  width: 100%;
  height: 29rem;
  position: absolute;
  z-index: 1;
}

.about-us__hero-info {
  position: absolute;
  left: 10%;
  top: 17%;
  font-size: 1.2rem;
}

.about-us__hero-info h1 {
  margin-bottom: 0.5rem;
}

.about-us__hero-info p {
  margin-top: 0;
  max-width: 50%;
}

.main-navbar {
  top: 0;
  grid-area: header;
}

main.about-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(12, 7%);
  grid-template-areas: "A A A A A A B B B B B B" "C C C C C C D D D D D D" "E E E E E E F F F F F F" "G G G G G G H H H H H H";
  column-gap: 1%;
  grid-area: main-content;
  max-width: 1392px;
}

.employee-container p {
  margin-top: 0;
}

.employee-container h4 {
  margin-bottom: 0;
}

.employee-img-container {
  width: 100%;
  position: relative;
}

.gif-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
  object-fit: cover;
  border-radius: 10px;
}

.employee-container:hover .gif-image {
  display: block;
}

.employee-container:hover {
  border: 1px dashed #60b0e2;
  border-radius: 10px;
}

.employee-container {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  padding-bottom: 0;
}

.employee-info {
  display: grid;
  justify-items: center;
  position: relative;
  border-radius: 10px;
}

.employee-info .employee-img {
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  object-position: 50% 0;
  transition-duration: 1000ms;
}

.main-footer {
  grid-area: footer;
}

.scroll {
  background-color: #211d1c;
}

.scroll .hamburger-inner,
.scroll .hamburger-inner::before,
.scroll .hamburger-inner::after {
  background: #d1c9c3;
}


/* Employees */

.employee1 {
  grid-area: A;
}

.employee2 {
  grid-area: B;
}

.employee3 {
  grid-area: C;
}

.employee4 {
  grid-area: D;
}

.employee5 {
  grid-area: E;
}

.employee6 {
  grid-area: F;
}

.employee7 {
  grid-area: G;
}

.employee8 {
  grid-area: H;
}


/* Employees */

@media (min-width: 46rem) {
  main.about-content {
    grid-template-areas: "A A A A B B B B C C C C" "D D D D E E E E F F F F" ". . G G G G H H H H . .";
    column-gap: 1%;
  }
}

@media (min-width: 60rem) {
  main.about-content {
    grid-template-areas: "A A A B B B C C C D D D" "E E E F F F G G G H H H"
  }
}


/* ALL THE CSS CODE FROM SHARED.CSS */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
* {
  box-sizing: border-box;
}

html {
  position: relative;
  scroll-behavior: smooth;
}

.drop-shadow {
  background-image: url(imgs/general-bg/dark_embroidery.png);
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

#dropshadow {
  display: none;
}

#dropshadow nav {
  position: fixed;
  top: 10%;
  z-index: 3;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  position: fixed;
  top: 6rem;
  left: 2.3rem;
}

.mobile-nav-item a {
  text-decoration: none;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.mobile-nav-item a:hover,
.mobile-nav-item a:active {
  color: white;
}

.mobile-nav-main-item a:hover,
.mobile-nav-main-item a:active {
  color: white;
  border-color: white;
}

.mobile-nav-main-item a {
  text-decoration: none;
  position: fixed;
  left: 2.1rem;
  display: block;
  color: #d1c9c3;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #d1c9c3;
  border-radius: 0.4rem;
  padding: 0.2rem 0.3rem;
}

.nav-item a {
  text-decoration: none;
  color: #d1c9c3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-navbar {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 100%;
  font-weight: 500;
  transition-duration: 500ms;
  z-index: 100;
}


/*                       */


/* Hamburger Icon below */

.hamburger {
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
  width: 3rem;
  padding: 0;
  padding-top: .3rem;
}

.hamburger-box {
  width: 60%;
  height: 1.4rem;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  height: 0.2rem;
  width: 100%;
}


/* Hamburger Icon above */


/*                     */

.main-navbar nav {
  width: 35%;
  height: 100%;
  display: none;
  align-items: center;
}

.brand {
  width: 15%;
  display: flex;
  justify-content: center;
}

.logo-link {
  height: 2.5rem;
}

.logo-link img {
  height: 100%;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  flex-grow: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  color: #d1c9c3;
}

.nav-item {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  cursor: pointer;
  height: 100%;
}

.nav-item:hover,
.nav-item:active {
  background: #5cb57d;
}


/* Footer */

.main-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4rem;
  background-color: #131110;
  color: #d1c9c3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 1rem 0;
}

.footer-list {
  display: flex;
  padding: 0;
  margin: 0;
}

.footer-item {
  list-style: none;
  margin: 0 1rem;
  cursor: pointer;
}

.right-reserved p {
  margin: 0;
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

.navbar-override {
  transition-duration: 0ms;
  background-color: #211d1c;
}

@media (min-width: 60rem) {
  .main-navbar {
    justify-content: space-between;
    height: 6rem;
  }
  .logo-link {
    height: 4rem;
  }
  button.hamburger {
    display: none;
  }
  .main-navbar nav {
    display: block;
  }
}

<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Experiment 1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../hamburgers.css" rel="stylesheet">
  <link rel="stylesheet" href="../shared.css">
  <link rel="stylesheet" href="about-style.css">
</head>

<body>
  <div id="dropshadow">
    <nav>
      <ul class="mobile-nav-list">
        <li class="mobile-nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="mobile-nav-item">
          <a href="about.html">About</a>
        </li>
        <li class="mobile-nav-item">
          <a href="../main-index.html">Contact us</a>
        </li>
        <li class="mobile-nav-main-item">
          <a href="../main-index.html">Product menu</a>
        </li>
      </ul>
    </nav>
  </div>

  <header class="main-navbar">
    <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    <div class="brand">
      <a class="logo-link" href="#">
        <img src="../imgs/logo/logo-black.png" alt="logo-brand-image">
      </a>
    </div>
    <nav>
      <ul class="nav-list">
        <li class="nav-item">
          <a href="../main-index.html">Home</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">About</a>
        </li>
        <li class="nav-item">
          <a href="../about/about.html">Contact us</a>
        </li>
      </ul>
    </nav>
  </header>

  <section class="about-us__hero-section">
    <div class="about-us__hero-info">
      <h1>Meet Our Team</h1>
      <p>These are the people that make the magic happen.</p>
    </div>
  </section>

  <main class="about-content">
    <div class="employee-container employee1">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img"     src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/S3sc3Pg9dFpUA/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Jennie Kimbel</h4>
        <p>CEO</p>
      </div>
    </div>

    <div class="employee-container employee2">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/gIfv29q3ULtqjYTR7B/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Alex Shiff</h4>
        <p>Web Designer</p>
      </div>
    </div>

    <div class="employee-container employee3">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/1iTnzFRFQwDpv3C8/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Anthony Smith</h4>
        <p>Customer Service</p>
      </div>
    </div>

    <div class="employee-container employee4">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/q6RoNkLlFNjaw/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Hermy Shanders</h4>
        <p>CPO</p>
      </div>
    </div>

    <div class="employee-container employee5">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/xUPGcqN9laat2ooiJi/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Abdul Mubarak</h4>
        <p>Janitor</p>
      </div>
    </div>

    <div class="employee-container employee6">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/EsmlrgWNx5v0Y/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Mark Robert</h4>
        <p>Marketing Director</p>
      </div>
    </div>

    <div class="employee-container employee7">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/Ni4cpi0uUkd6U/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Iestyn Etik</h4>
        <p>Web developer</p>
      </div>
    </div>

    <div class="employee-container employee8">
      <div class="employee-info">

        <div class="employee-img-container">
          <img class="employee-img" src="https://serving.photos.photobox.com/585075754258d926e237de819bf623cbf2d065006e653c4ec7a9e53bd66bb6c3fef67ea6.jpg" alt="employee picture">
          <img class="gif-image" src="https://media.giphy.com/media/UWRyZHCsHtBFS/giphy.gif" alt="gif representing employee's personality">
        </div>

        <h4>Haley Ford</h4>
        <p>Customer Service</p>
      </div>
    </div>
  </main>

  <footer class="main-footer">
    <nav>
      <ul class="footer-list">
        <li class="footer-item">Support</li>
        <li class="footer-item">Terms of use</li>
      </ul>
    </nav>
    <div class="right-reserved">
      <p>©2020 - m3supplies. All rights reserved</p>
    </div>
  </footer>

  <script src="about-script.js" async defer></script>

</body>

</html>

Right align an element which parent might or might not have fixed width

Simply doing margin-left:auto and margin-right:0(or unspecified) should do the trick.