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.
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.
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:Read: https://www.w3.org/TR/css-flexbox-1/#flex-base-size:
This doesn't seem to be applied in our case.