Как получить фиксированную боковую панель в Bulma?

Question

Я хочу иметь два столбца, левую боковую панель и основное содержимое.

Я хочу, чтобы боковая панель была фиксированной (и чтобы она при необходимости прокручивалась)

  <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> 

editorjs будет содержать много контента, поэтому я хочу, чтобы на содержимое боковой панели не влияла прокрутка в основном разделе.

Demo

Answer 1

position: sticky вместе с display: inline-block могут помочь вам в этом.

Кроме того, установите max-height на всю высоту страницы и overflow-y: auto для функции прокрутки. Я также установил для свойств top и bottom значение 0, чтобы растянуть боковую панель вдоль оси Y.

Посмотрите мой JS Bin .