Make column fill vertical space in Bulma?

Question

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?

Contiguous

github.com/jgthms/bulma/issues/860 This github issue may help – Barmecide

Answer 1

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.

Replenish

Can you share the styles associated with your columns, column, and is-paddingless classes? – Replenish

Answer 2

Give a class or id or just write inline style and do

 min-height : XXvh;

Where xx is how VH you need.

According to MOzila devaloper vh Equal to 1% of the height of the viewport's initial containing block.

---

Pickerelweed

Unless the second column is a fixed height and even then it would be better to have the first column fill the space rather then hardcode a size – Nucleolar