bulma level inside box overflowing - html

Question

I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>

Answer 1

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>

Answer 2

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.