Ink: `justifyContent='flex-end'` not working as expected

[colinking]

I'm trying to use justifyContent='flex-end' to right-align some content, but it seems to not work as expected (though CMIIW!). I put together a small example:

// https://github.com/colinking/ink-testing/blob/master/src/flex-grow.tsx
import React from 'react'
import { render, Box, Color } from 'ink'

/**
 * Output:
 *  STARTExample Step:[1/6]                                                      END
 * Expected:
 *  STARTExample Step:                                                      [1/6]END
 */

const Example: React.FC = () => {
  return (
    <Box flexDirection='row' width={80}>
      START
      <Box flexGrow={0}>
        <Color white>Example Step:</Color>
      </Box>
      <Box flexGrow={1} justifyContent='flex-end'>
        <Color grey>[1/6]</Color>
      </Box>
      END
    </Box>
  )
}

render(<Example />)

You can run this like so:

$ git checkout https://github.com/colinking/ink-testing.git
$ npm i
$ npx ts-node src/flex-grow.tsx

[vadimdemedes]

While I'm working on a fix, you can work around this by wrapping <Color grey>[1/6]</Color> in a <Box>, like so:

<Box><Color grey>[1/6]</Color></Box>

[vadimdemedes]

Fixed via https://github.com/vadimdemedes/ink/commit/1f9630050d78ae294080d53f0f00cd94e95a3027. Will keep the issue open until new release is out.

[vadimdemedes]

Fixed in 2.5.0.