How to get a fixed sidebar in Bulma?

I want to have two columns, a left sidebar, and the main content.

I want the sidebar to be fixed (and for it to scroll if need be)

  <div class="is-widescreen">
    <div class="columns">
      <aside id="main_sidebar" class="column">
        <h1>test</h1>
      </aside>  
      <div class="column is-four-fifths">
        <div id="editorjs" class="content">
          <!-- see the demo for the effect-->
        </div>
        <button id='save'>save article</button>    
      </div>
    </div>
  </div>

The editorjs would contain lots of content and so I want the sidebar content not to be affected by the scrolling on the main section.

Demo

Solution

position: sticky along with display: inline-block can help you achieve that.

Also, set max-height to the full height of the page and overflow-y: auto for the scroll functionality. I've also set the top and bottom properties to 0 in order to stretch the sidebar along its y axis.

.menu {
  position: sticky;
  display: inline-block;
  vertical-align: top;
  max-height: 100vh;
  overflow-y: auto;
  width: 200px;
  top: 0;
  bottom: 0;
  padding: 30px;
}

.content {
  display: inline-block;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
  </head>
  <body>
    <div class="is-widescreen">
      <div class="columns">
        <aside class="menu">
          <p class="menu-label">
            General
          </p>
          <ul class="menu-list">
            <li><a>Dashboard</a></li>
            <li><a>Customers</a></li>
          </ul>
          <p class="menu-label">
            Administration
          </p>
          <ul class="menu-list">
            <li><a>Team Settings</a></li>
            <li>
              <a class="is-active">Manage Team</a>
              <ul>
                <li><a>Members</a></li>
                <li><a>Plugins</a></li>
                <li><a>Add a member</a></li>
                <li><a>Members</a></li>
                <li><a>Plugins</a></li>
                <li><a>Add a member</a></li>
                <li><a>Members</a></li>
                <li><a>Plugins</a></li>
                <li><a>Add a member</a></li>
                <li><a>Members</a></li>
                <li><a>Plugins</a></li>
                <li><a>Add a member</a></li>
                <li><a>Members</a></li>
                <li><a>Plugins</a></li>
                <li><a>Add a member</a></li>
              </ul>
            </li>
            <li><a>Invitations</a></li>
            <li><a>Cloud Storage Environment Settings</a></li>
            <li><a>Authentication</a></li>
          </ul>
          <p class="menu-label">
            Transactions
          </p>
          <ul class="menu-list">
            <li><a>Payments</a></li>
            <li><a>Transfers</a></li>
            <li><a>Balance</a></li>
          </ul>
        </aside>
        <div class="column content">
          <div id="editorjs">
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
            <h1>test</h1>
          </div>
          <button id="save">save article</button>
        </div>
      </div>
    </div>
  </body>
</html>

or check out my JS Bin.