Flex child is shrunk despite sibling has text-overflow ellipsis
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: spand, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0
Steps to reproduce:
As summary says, a flex child (mod_csgo_caster.png in this case) is shrunk while the sibling has text overflow ellipsis. Chrome doesnt but I am not able to determine if this is a Chrome or Firefox bug. A live example: https://jsfiddle.net/0qfcmjy3/
html:
<div class="con">
<a href="/stream/3205/telia-esports-series" class="col-box row a-reset" data-link-tracking-page="Frontpage" data-link-tracking-column="[3rd column]" data-link-tracking-destination="Click on Stream [text]" title="Telia Esports Series"><img title="Caster" src="https://static.hltv.org/images/mod_csgo_caster.png" style="/*! flex: 0 0 auto; */"> <img alt="Finland" src="/img/static/flags/30x20/FI.gif" class="flag" title="Finland"> <span class="name a-default">Telia Esports Series</span>969</a>
</div>
Css:
.con {
width: 145px
}
.row {
padding: 3px 5px;
height: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.name {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Actual results:
The picture shrinks to about 6.1(..) px
Expected results:
I expected it to remain 10px in both width and height.
|
||
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
Using a Nightly build I see no difference to Chrome when looking at the jsfiddle example. The image on the left (the mic) is 10x10px in both for me.
I think this have been fixed already. Can you verify by testing Nightly please?
https://nightly.mozilla.org/
Looks good in Nightly! Good work.
Sorry for the interruption.
|
|
||
Comment 3•5 years ago
|
||
No problem, thanks for reporting it and verifying it now works!
|
||
Comment 4•5 years ago
|
||
Bug 1316534 fixed the computation of the flex item's min-wdith:auto, so mod_csgo_caster.png's min-width is now 10px. The flex container won't shrink it further.
Description
•