I'm struggling to achieve a specific layout using flexbox. I require one child element that does not shrink, and two child elements that can shrink/grow and be truncated based on their content while considering the sizes of their content.
My current solution (using Tailwind CSS classes, although it's not crucial):
<div class="flex items-stretch">
<div class="flex-none">Lorem</div>
<div class="flex-initial min-w-0">
<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="flex-initial min-w-0">
<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut mollis tortor, ut volutpat lacus.</div>
</div>
</div>
This setup would result in:
https://i.sstatic.net/TCTpc.png
This is precisely what I aim to accomplish. However, replacing the child div elements with button elements causes the text not to truncate anymore and the parent element overflows.
<div class="flex items-stretch">
<div class="flex-none">Lorem</div>
<div class="flex-initial min-w-0">
<button class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
</div>
<div class="flex-initial min-w-0">
<button class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut mollis tortor, ut volutpat lacus.</button>
</div>
</div>
https://i.sstatic.net/wjJoN.png
What am I missing to enable text truncation for buttons in this scenario?
Here's the code snippet: