I am facing an issue with a flex-box tag cloud where the sizing is controlled from the outside. I need the tags inside to be collapsible all the way down to zero if necessary, but currently they only collapse up to 2 times their padding.
https://i.sstatic.net/lqT7n.png
Essentially, I am looking for a solution to prioritize flex-shrink over padding.
If possible, I would like to achieve this without using overflow: hidden as it may cause conflicts with other elements within the container.
Here is a runnable snippet:
$('button').on('click', (e) => {
$('.tags').css({
width: $(e.target).text()
});
});.tags {
display: flex;
margin-bottom: 20px;
background: red;
overflow: visible;
padding: 20px 5px;
}
.tag {
position: relative;
padding: 5px 10px;
background: #ccc;
border: 1px solid #aaa;
border-radius: 20px;
white-space: nowrap;
text-overflow: ellipsis;
flex-shrink: 1;
overflow: hidden;
}
.tag + .tag {
margin-left: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Tags will not collapse beyond 2 x padding</h3>
<div class="tags" style="width: 200px">
<div class="tag">Tag 1</div>
<div class="tag">Tag 2</div>
<div class="tag">Tag 3</div>
</div>
<br />
<div>
<button>200px</button>
<button>100px</button>
<button>50px</button>
<button>10px</button>
</div>Does anyone have a solution for this?