When using buttons in a chatbot that have text which changes based on selected options, I've encountered an issue where the text length sometimes exceeds the button's space.
I'm looking for a way to make the containing div automatically adjust its height based on the content inside while maintaining proper grid alignment (3x3).
I've attempted using height: auto, but it disrupts the appearance. I also tried using flex without success.
Below is my vue file code snippet where these menu buttons are implemented:
<div class="row">
<template
v-for="(item, index) in this.items.slice(0, maxNumberOfItems)"
:key="index"
>
<div :class="((index >= (this.items.length - 1)) && (index % 2 == 0)) ? 'px-2 pb-2 col': 'px-2 pb-2 col col-6'">
<Button
@on-click="onButtonClick(item)"
:text="item"
/>
</div>
</template>
</div>