Creating a Sidebar Within a Flexbox with CSS

Creating a Sidebar within a flexbox with CSS

You can set the height and width in a flexible way.

  • Height is set to 100% of the height of the viewport minus the height of the header.
  • Width is set to 100px for the sidebar. The content is now allowed to grow to fill the rest of the screen.

Hope this helps.

html {

  height: 100%;

}

body {

  height: 100%;

  margin: 0;

  font-family: Ubuntu;

  background: linear-gradient(#b3ffab, #67fffc);

}

#header {

  height: 30px;

  display: flex;

  align-items: center;

  background: linear-gradient(#444444, #333333);

  color: #bbbbbb;

}

#headerContent {

  margin-left: 10px;

}

#page {

  display: flex;

  height: calc( 100vh - 30px);

  /* calculate the height. Header is 30px */

}

#sideBar {

  width: 100px;

  background: red;

}

#content {

  background: blue;

  flex: 1 0 auto;

  /* enable grow, disable shrink */

}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />

<div id="header">

  <div id="headerContent">

    Desktop

  </div>

</div>

<div id="page">

  <div id="sideBar">

    <div>

      box 1

    </div>

    <div>

      box 2

    </div>

  </div>

  <div id="content">

    content

  </div>

</div>

How to create a sidebar and content area using flexbox?

You just need to use min-height instead of height

html, body {
    margin: 0;
    height: 100%;
}

body {
  height: 100%;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    min-height: 100%;
}

html,

body {

  margin: 0;

  height: 100%;

}

body {

  height: 100%;

}

.flex-container {

  display: -webkit-flex;

  display: flex;

  background-color: red;

  min-height: 100%;

}

.sidenav {

  background-color: lightgray;

  -webkit-flex: 1;

  flex: 1;

}

.content {

  background-color: lightblue;

  padding: 10px;

  -webkit-flex: 5;

  flex: 5;

  height: 2000px;

}
<body>

  <div class="flex-container">

    <div class="sidenav">

      <ul>

        <li>Item 1</li>

      </ul>

    </div>

    <div class="content">

      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem

      ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

    </div>

  </div>

</body>

Fixed position sidebar within a flex container

You can use position: sticky;. It respects the flex and has a fixed purpose.

DEMO:

.container {
  width: 1000px;
  margin: auto;
  border: 1px solid black;
}

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

.left-content {
  height: 1000px;
  width: 70%;
  background-color: red;
}

.right-sidebar {
  height: 200px;
  width: 20%;
  background-color: yellow;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
<div class="container">
  
  <div class="content">
    <div class="left-content">
    left content
    </div>
    
    <div class="right-sidebar">
    right sidebar
    </div>
  </div>
</div>

Sidebar with two flexbox navs top and bottom

There are probably other ways to do this. In short I did the following:

  1. Wrap your elements with a parent that is able to grow in size (.sidebar__wrapper)
  2. Set the min-height instead of height so it can grow
  3. Use flex-grow if you want an element to fill out the remaining space.

html, body {

  margin: 0;

}

* {

  box-sizing: border-box;

}

.sidebar {

  height: 100vh;

  width: 300px;

  background: #ccc;

  overflow-y: scroll;

  

  margin: 0;

  padding: 0;

}

/* set up a wrapper that can grow in size */

.sidebar__wrapper {

  height: auto;

  min-height: 100vh;

  width: 100%;

  background: #808080;

  

  padding: 10px;

  margin: 0;

  

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.sidebar__top {

  background: red;

  min-height: 200px;

  margin-bottom: 10px;

  

  /* this fills up the remaining space */

  flex-grow: 1;

}

.sidebar__bottom {

  background: blue;

  min-height: 100px;

}
<aside class="sidebar">

  <div class="sidebar__wrapper">

    <nav class="sidebar__top" contenteditable="true">

      <p>test</p>

    </nav>

    <nav class="sidebar__bottom"></nav>

  </div>

</aside>

How to align Items at the top and on the bottom in a Sidebar with flexbox?

To get what you want, apply margin-top: auto; to the first element that should be part of the "bottom-group", and leave the justify-content setting of the flex container at its default (i.e. no definition for that setting). Also, you need to define a height for the flex container, otherwise it will only have the added height of all its children by default (I made it 100vh, i.e. full viewport height, but adjust that as needed):

(note: view the snippet in full page view, otherwise it's not high enough to show the desired result)

html, body {
  margin: 0;
}
.sidebarleft {
  background-color: rgb(25, 20, 26);
  display: flex;
  flex-direction: column;
  flex: 0 0 50px;
  height: 100vh;
}

.sidebarleft-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border: none;
  background-color: inherit;
  color: rgb(100, 110, 122);
}
.sidebarleft-button:nth-child(4) {
  margin-top: auto;
}
<div class="sidebarleft">
  <button class="sidebarleft-button">A</button>
  <button class="sidebarleft-button">B</button>
  <button class="sidebarleft-button">C</button>

  <button class="sidebarleft-button">Y</button>
  <!-- this Item should be on the bottom -->
  <button class="sidebarleft-button">Z</button>
  <!-- this Item should be on the bottom -->
</div>

Forcing sidebar scroll using flexbox layout

Add overflow-y: auto;, this will solve your problem.

CSS Map and sidebar layout with flex-box

You can accomplish that with these steps:

  • Give map-container a height, height: 100%;

  • Add flex-grow: 1 to map, and it will take the avail space left (and order: 1 to move it to the right side)

  • Move overflow: scroll to info-block (I changed it to auto and also removed the info-block__inner as it appeared it was only there for the scroll)

Instead of adding order: 1 to map, you can of course move its markup after the info-block.

Updated plnkr

Stack snippet

let mymap = L.map('map').setView([54.5, -2], 6);

   L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {

    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',

    id: 'mapbox.streets',

    accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'

   }).addTo(mymap);
*{

    padding: 0;

    margin: 0;

}

html, body{

    height: 100%;

}

.map-container{

  display: flex;

  height: 100%;

}

.map{

  border: 1px solid green;

  flex-grow: 1;

  order: 1;

}

.info-block{

    background: white;

    width: 400px;

    overflow: auto;

}

.content_container{

    padding: 0 20px 20px 20px;

}

.content{

    margin-top: 30px;

}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />

  <div class='map-container'>

    

    <div id="map" class="map flex-element"></div>

    <div class="info-block flex-element">

        <div class="content_container">

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

          <div class="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo incidunt minus necessitatibus nisi quo totam. Assumenda, consequatur cupiditate dolorem esse eum fugiat, fugit minus nam natus nesciunt optio vel.</p>

          </div>

        </div>

    </div>

  

  </div>

  <!-- Make sure you put this AFTER Leaflet's CSS -->

  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

Left align content using flexbox in a sidebar

You should not embed the the <span> tag inside the <i> tag because when you was applying style on .nav-link the span tag treated like the child of <i> tag

.title {
  display: inline-block;
}

/*Main Container (body)*/

.main-container {
  font-family: Roboto, Arial;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

header .title {
  margin: 5% 5%;
}

main {
  margin: 1% 3%;
}

/*Categories*/

.home-categories {
  display: inline-block;
  text-align: center;
  padding: 2% 0;
  margin-bottom: 5%;
  width: 100%;
}

.home-categories-img {
  width: 95%;
}

.navbar {
  position: fixed;
  background-color: #525252;
  transition: width 600ms ease;
  overflow: auto;
  bottom: 0;
  height: 3rem;
  width: 100vw;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.nav-item {
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  text-decoration: none;
  justify-content: center;
  font-size: 200%;
}

.link-text {
  font-family: Roboto, Arial;
  display: none;
  margin-left: 1rem;
}

footer {
  padding: 5%;
}

/*LARGE SCREEN VIEW*/

@media screen and (min-width: 748px) {
  header .title {
    margin: 2% 5%;
    margin-left: 10%;
  }
  /*Content Container (main)*/
  .main-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1% 5%;
    margin-left: 10%;
  }
  /*Categories*/
  .home-categories {
    flex: 0 1 48%;
    margin: 0 1% 5% 1%;
  }
  .home-categories:nth-child(even) {
    margin-top: 15%;
    margin-bottom: 0;
  }
  .home-categories:nth-child(odd) {
    margin-bottom: 15%;
  }
  .navbar {
    top: 0;
    width: 4rem;
    height: 100%;
  }
  .navbar-nav {
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
  }
  .navbar:hover {
    width: 16rem;
  }
  .navbar:hover .link-text {
    display: inline;
  }
  footer {
    margin-left: 4rem;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="main-container">
  <header>
    <a href="index.html">
      <h1 class="title">page name</h1>
    </a>
    <nav class="navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-home fa-fw" aria-hidden="true"></i>
            <span class="link-text">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-address-card fa-fw" aria-hidden="true"></i>
            <span class="link-text">About</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">
            <i class="fa fa-paper-plane fa-fw" aria-hidden="true"></i>
            <span class="link-text">Contact</span>
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <main class="main-wrapper">
    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Website image">
        <h2>Websites</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Games image">
        <h2>Games</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Apps image">
        <h2>Apps</h2>
      </a>
    </article>

    <article class="home-categories">
      <a href="">
        <img class="home-categories-img" src="https://via.placeholder.com/490x730" alt="Art image">
        <h2>Art</h2>
      </a>
    </article>
  </main>
  <footer>
    <p><a href="">mail</a></p>
    <p><a href="">Link</a></p>
  </footer>

Related Topics

Blank Iframe in Ie

How to Calculate Required Hue-Rotate to Generate Specific Colour

How to Make Nice Looking Matrix of Buttons with Bootstrap 3

Angular Material Ng-Tns Class Changes Margin of Items in My Table, Can Use CSS to Change the Margin But Then Another Variant of Ng-Tns Is Applied

Why Does Vertical-Align: Text-Top Make Element Go Down

Using Os 9 Resource Fork Fonts in CSS with @Font-Face

Browsers Does Not Reflects Updates in the Code

How to Vertically Align a <Table> in the Middle of a Fixed Height <Div>

3 Column Layout (Fixed, Fluid, Fixed) with Minimum Width

How to Set Font-Family in HTML Select Dropdown List in Ie

Line Height Issue with Inline-Block Elements

HTML Email: Tables or Divs

How to Write Backwards Compatible HTML5

Why Is the Child Div Offset

How Would I Remove the Gap Between the Image and the Bootstrap Nav Bar

How to Create a Pricetag Shape in CSS and HTML

Two P Tag in Same Line

How Is Bootstrap V4 Loading _Reboot.Scss


Leave a reply



Submit