Flex-shrink, has a bug, when canvas is small than all items, Item gets default, not small size.

Report

• [ X] I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Run the following example url, with 400, 425, 450 and you will see at 425,450 perfect.
however, at 400 outer canvas size, jumps to rendering as if the canvas size was set to 450, should still be the most compact 425 form.

http://tinyurl.com/y52sszqq

Possible also related to the following issues and maybe simpler to reproduce.

https://github.com/facebook/yoga/issues/674

Yoga logo
Documentation
Playground
GitHub
http://tinyurl.com/y52sszqq
FlexAlignmentLayout
WIDTH × HEIGHT
500
400
MAX-WIDTH × MAX-HEIGHT
none
none
MIN-WIDTH × MIN-HEIGHT
0
0
ASPECT RATIO
auto
0
0
PADDING
0
0
0
0
BORDER
0
0
0
0
MARGIN
0
0
POSITION TYPE

relative

absolute
POSITION

React Native
copy to clipboard
import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 400,
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          minHeight: 25,
          maxHeight: 300,
          justifyContent: 'center',
          flexBasis: 150,
          flexGrow: '0.33',
          flexShrink: '0.25',
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 50,
            minHeight: 25,
            maxHeight: 150,
            alignItems: 'center',
            flexBasis: 75,
            flexGrow: '0.3',
            flexShrink: '0.5',
          }} />
        </View>
        <View style={{
          flex: 1,
          width: 100,
          height: 200,
          maxWidth: 200,
          maxHeight: 200,
          flexGrow: 1,
          flexShrink: 0,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          minHeight: 200,
          justifyContent: 'space-evenly',
          alignSelf: 'stretch',
          flexBasis: 200,
          flexGrow: 0,
          flexShrink: 0,
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
        </View>
      </View>
    );
  }
};
import React, {Component} from 'react';
import {View} from 'react-native';

export default class MyLayout extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        width: 500,
        height: 400,
      }}>
        <View style={{
          flex: 1,
          width: 100,
          height: 100,
          minHeight: 25,
          maxHeight: 300,
          justifyContent: 'center',
          flexBasis: 150,
          flexGrow: '0.33',
          flexShrink: '0.25',
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 50,
            minHeight: 25,
            maxHeight: 150,
            alignItems: 'center',
            flexBasis: 75,
            flexGrow: '0.3',
            flexShrink: '0.5',
          }} />
        </View>
        <View style={{
          flex: 1,
          width: 100,
          height: 200,
          maxWidth: 200,
          maxHeight: 200,
          flexGrow: 1,
          flexShrink: 0,
        }} />
        <View style={{
          flex: 1,
          width: 100,
          minHeight: 200,
          justifyContent: 'space-evenly',
          alignSelf: 'stretch',
          flexBasis: 200,
          flexGrow: 0,
          flexShrink: 0,
        }}>
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
          <View style={{
            flex: 1,
            width: 100,
            height: 100,
          }} />
        </View>
      </View>
    );
  }
};

Start with the linked reproduction and compare the layout at outer canvas widths 400, 425, and 450, using the included React Native example as the entry point. Trace the flex-shrink calculation responsible for the 400-width result; done means the 400-width canvas retains the most compact 425 form instead of rendering as 450.