Bulma flexbox dynamic scroll

by jorgeluis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">

<div class="columns" style="height: 100%; background: beige">

  <div class="column">
    Col 1
  </div>

  <div class="column is-flex is-flex-direction-column">
  
    <h3>
      Title
    </h3>
    <p>
    subhead text
    </p>

    <div class="has-vertical-scrolling" style="flex: 1; background: tomato; overflow-y: auto;min-height: 0px;"> 
    
      <p>
      This orange section -- and only this section -- should scroll if necessary
      </p>
      
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

      <h2>Header Level 2</h2>

      <ol>
         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
         <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>

      <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

    
    </div>

  </div>

</div>

SCSS

html, body {
    height: 100%;    
}

.is-flex-direction-column {
  flex-direction: column
}

.has-vertical-scrolling {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

JavaScript

const app = new Vue()
app.$mount('#app')