Bulma: level does not wrap text or have gap like columns

[emhohensee]

This is about Bulma

Overview of the problem

This is about the Bulma CSS framework
This is about the Bulma Docs

My browser is: Firefox Developer Edition 57.0b14 (64-bit) & Firefox 56.0.2 (64-bit)

Description

I'm trying to get two different columns vertically aligned. Since I don't see a class to do it with columns, I'm trying to use level. Level does not wrap the text, nor put a gap between the level-left and level-right in my browsers. This means the description runs off the page and butts into the title. I'm sure I must be doing something wrong. Is there a way to use level with columns? What's the preferred way of doing vertically aligned columns?

Steps to Reproduce

<nav class="level">
    <div class="level-left">
        <div class="level-item">
            <h2 class="title">A reasonably long title that butts right up against the level-right div</h2>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <p class="subtitle">Some description text about my web app that doesn't get wrapped so this part will probably be off the screen.</p>
        </div>
    </div>
</nav>

I tried wrapping this in a section, container, and both and that didn't help. I also tried intermingling the levels with columns and that didn't work either.

Expected behavior

To use level to create vertically aligned left and right columns.

Actual behavior

The text runs off the page and doesn't have a gap between level-left and level-right. It is, however, vertically aligned.

[emhohensee]

Screen grab of what it looks like for me. The first is columns. The second is level.

[jgthms]

You can use "columns is-vcentered"

[tehmaestro]

Hi, I'm trying to do the same thing. Can I make the level-items wrap content? I'm tring to do a simple menu, with icon and link next to each other, leveled.

[elecprog]

I had a similar problem, changing flex-shrink: 0 to flex-shrink: 1 in .level-item fixed it for me.
@jgthms is there a reason why it is flex-shrink: 0?

[afwn90cj93201nixr2e1re]

@jgthms check last comment, waiting response.

[albandum]

Up, having the same issue :)

[ahdigital]

Me too