Dynamic flex item width - css

Question

I made a working example what I want to achieve: Tabs fill up the given space evenly, if the text is too long, it is truncated with ellipsis.
The problem starts, if I wrap it into flex div. (It is a legacy code and part of complex template, and I want ot make as little change as possible)
.box {
border: 2px dotted rgb(96, 139, 168);
}
.box div {
min-width: 0px;
display: flex;
align-items: center;
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>
<b>Expected</b>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
<div class='mr-2 flex items-center'>
<a class="truncate">Link 1</a>
<a class="truncate">Link 2</a>
</div>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
</div>
The problem, that in the second example the tabs do not shrink, they expand the viewport with a scrollbar.
Here is the jsbin

Answer 1

You just need to add width and overflow properties to the ".box" div. working example below.
.box {
border: 2px dotted rgb(96, 139, 168);
/* ADD THESE PROPERTIES */
width: 100%;
overflow: hidden;
}
.box div {
min-width: 0px;
display: flex;
align-items: center;
border: 2px solid rgb(96, 139, 168);
border-radius: 5px;
background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>
<b>Expected</b>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
<div class='mr-2 flex items-center'>
<a class="truncate">Link 1</a>
<a class="truncate">Link 2</a>
</div>
<div class="box h-16 flex items-stretch">
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
<div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>
</div>