bulma level inside box overflowing

The Bulma levels are explicitly told not to shrink

.level-left, .level-right {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

You'll have to override that to get the levels to not break out of the .box elements.

Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.

Something like

<div class="level is-mobile level-is-shrinkable">
   Level items here...
</div>

<style>
    .level-is-shrinkable .level-left,
    .level-is-shrinkable .level-right {
        flex-shrink: 1;
    }
</style>

In my case, I had to add a third styling condition for centered level-item elements:

.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
  flex-shrink: 1;
}

Many thanks to just-a-web-designer for his|her answer.