Welcome to my first post on this platform!
I love a good HTML challenge, but I'm stumped on this particular issue and could really use some help. Thank you in advance to anyone who can assist.
What I am trying to achieve is to create a series of inline divs/buttons that expand their width to fill their parent div. It seemed easy at first with the code snippet below (which I found on stackoverflow):
<div class="btn-holder">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
<button type="button">Button 3</button>
</div>
<div class="btn-holder">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
<button type="button">Button 3</button>
<button type="button">Button 4</button>
<button type="button">Button 5</button>
<button type="button">Button 6</button>
<button type="button">Button 7</button>
<button type="button">Button 8</button>
<button type="button">Button 9</button>
<button type="button">Button 10</button>
<button type="button">Button 11</button>
<button type="button">Button 12</button>
</div>
<style>
.btn-holder {
display: flex;
}
.btn-holder button {
flex-grow: 1;
min-width: fit-content;
}
</style>
The above code works well for just three buttons, but when there are 12 buttons, they all overflow the parent div or get cramped into a single line.
What I actually need is for the buttons to have a minimum width of 'fit-content' and for the parent div to break into multiple lines if necessary.
The closest solution I've come up with is to simply 'text-align: justify;' the buttons - but then I can't figure out how to apply 'flex-grow' to them.
<style>
.btn-holder {
text-align: justify;
}
.btn-holder button {
min-width: fit-content;
width: maximize-to-fill-parent; /* Imaginary command */
display: inline-block;
}
</style>
If anyone out there has a brilliant suggestion, please do share! Thanks in advance!