My goal is to truncate the lengthy text in the span with the id of first-item when the screen size decreases. However, I am encountering an issue where setting margins on the parent element prevents it from shrinking, thus causing the truncation not to work as intended. I suspect that this problem is related to a discussion on Why don't flex items shrink past content size?, but despite my efforts, I have been unable to resolve it.
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
#container {
display: flex;
}
#first-item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<body>
<main>
<div id="container">
<span id="first-item">Long long long long long long long long long long long long long long long long long long long long long long long long text to be truncated</span>
<span>Shorter text</span>
</div>
</main>
</body>UPDATE: After receiving a comment from @AmauryHanser pointing out a typo in my initial post, which has since been corrected. Despite the appearance of an ellipsis, the text can only shrink up to a certain point, indicating that the issue persists. Refer to the screenshot below for clarification.