Problem when using with UILabel

[Elenionl]

When I tried to layout a cell, there is a problem with UILabel.
Here is the code of layout:

contentView.flex.direction(Flex.Direction.column).alignContent(Flex.AlignContent.stretch).justifyContent(Flex.JustifyContent.center).marginLeft(15).marginRight(15).define { (flex) in
      flex.addItem().direction(Flex.Direction.row).alignItems(Flex.AlignItems.center).justifyContent(Flex.JustifyContent.start).define({ (flex) in
        flex.addItem(iconImageBackView).width(30).height(30).addItem(iconImageView).width(30).height(30)
        flex.addItem().grow(1).alignContent(Flex.AlignContent.stretch).marginLeft(10).define({ (flex) in
          flex.addItem(titleLabel).marginTop(9.5).height(20)
          flex.addItem().grow(1).alignContent(Flex.AlignContent.center).direction(Flex.Direction.row).justifyContent(Flex.JustifyContent.end).marginBottom(9).height(17.5).define({ (flex) in
            flex.addItem(subTitle).shrink(1).grow(1).backgroundColor(UIColor.green)
            flex.addItem(ruleLabel).marginLeft(2.5)
            flex.addItem(playerLabel).marginLeft(2.5)
            flex.addItem(scoreLabel).marginLeft(2.5)
          })
        })
      })
      flex.addItem().height(1).backgroundColor(UIColor.white22622622610)
    }

In this code, roleLabel, playerLabel and scoreLabel all have layout like this, they are the label with red border with rounded corner.

flex.width(45).shrink(0).height(18).alignItems(Flex.AlignItems.center).justifyContent(Flex.JustifyContent.center).addItem(label).width(45)

The Layout result is like this:

the UILabel object subTitle pointed by the blue arrow is bigger than expected, can you help me with this problem?

[lucdion]

Hi @Elenionl,
Its difficult to answer your question without being able to test it, but your issue may be related to a container that needs to shrink.

I don't know exactly which container is currently wrong, but you could try either of these solutions:

Solution 1:
flex.addItem().grow(1).alignContent(Flex.AlignContent.stretch).marginLeft(10).define({ (flex) in
Allow this column container to shrink:
flex.addItem().grow(1).shrink(1).alignContent(.stretch).marginLeft(10).define({ (flex) in

Solution 2:
flex.addItem().grow(1).alignContent(Flex.AlignContent.center).direction(Flex.Direction.row).justifyContent(Flex.JustifyContent.end).marginBottom(9).height(17.5).define({ (flex)

Allow this row container to shrink:
flex.addItem().grow(1).shrink(1).alignContent(.center).direction(.row).justifyContent(.end).marginBottom(9).height(17.5).define({ (flex)

[lucdion]

@Elenionl, does that fix your issue?

[CharlesQiu]

@Elenionl
I have a similar problem, then I tried the solution 2, it worked!