Repository navigation
FlexboxLayout flex shrink factor is not multiplied by the flex base size #2980
Description
During testing we found out the upcoming release of FlexboxLayout will have a little bit off behavior when shrinking items.
Using the following HTML example, when the browser is resized, the items will shrink distributing the negative extra space proportionally to their size. Making the small items visible even when the container size is really small.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
border: 1px solid red;
}
p {
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>row</p>
<p>rowwreverse</p>
<p>column</p>
<p>columnwreverse</p>
<p>row</p>
<p>rowwreverse</p>
<p>column</p>
<p>columnwreverse</p>
</div>
</body>
</html>While in {N}, the flex-shrink (default 1) doesn't seem to be multiplied by the content size when accountent for a flex-shrink-factor:
<Page>
<ScrollView orientation="horizontal">
<!-- Experiment with the width here. The "row" item below will completely disappear while "columnwreverse" will stay quite large -->
<FlexboxLayout width="400" horizontalAlignment="left" borderWidth="1" borderColor="black">
<Label text="row" borderWidth="1" borderColor="black" />
<Label text="rowwreverse" borderWidth="1" borderColor="black" />
<Label text="column" borderWidth="1" borderColor="black" />
<Label text="columnwreverse" borderWidth="1" borderColor="black" />
<Label text="row" borderWidth="1" borderColor="black" />
<Label text="rowwreverse" borderWidth="1" borderColor="black" />
<Label text="column" borderWidth="1" borderColor="black" />
<Label text="columnwreverse" borderWidth="1" borderColor="black" />
</FlexboxLayout>
</ScrollView>
</Page>Read: https://www.w3.org/TR/css-flexbox-1/#flex-base-size:
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.
This doesn't seem to be applied in our case.
Activity
PanayotCankov commentedon Oct 28, 2016
Distributing negative extra space in a row sometimes affects the last item in a row, decreasing its size by
1, just enough to force text component to show ellipsis, even when it is with flex-shrink=0:vchimev commentedon Nov 8, 2016
The previous comment by @PanayotCankov will be addressed in 2.4.0.
The following snippet will work as expected:
[-]FlexboxLayout discrepancies[/-][+]FlexboxLayout flex shrink factor is not multiplied by the flex base size[/+]lock commentedon Aug 29, 2019
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.