Make column fill vertical space in Bulma?

html css bulma

Roymunson · Jul 22, 2018 · Viewed 12.5k times · Source

I have the following simple layout (with the exception that the textarea becomes a Code Mirror at runtime):

<div class="columns">
    <div class="column is-paddingless" style="background: indigo;">
            <textarea id="code-editor"></textarea>
    </div>
    <div class="column">
    </div>
</div>

The problem is - the first column does not fill the vertical space of the page (below the tabs) - rather it just wraps the height of the textarea. For instance:

Is there a way to make the column fill the page?

Answer

Flexbox should work for you! For your reference I love this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Setting up your .columns like this should do the trick:

.columns {
    display: flex;
    flex-direction: row; // this is default
    align-items: stretch; // this will stretch the children vertically
}

Unsure how you have .column styled (ie height: 100%) but let me know if this does NOT work and I can troubleshoot further.

Make column fill vertical space in Bulma?

Answer

Related questions