Flexbox parent and bounds=parent not working as expected

[wonskarol]

Overview of the problem

I'm using re-resizable version [6.5.4]
My browser is: Chrome Version 83.0.4103.116 (Official Build) (64-bit)

Description

I'm trying to compose two elements inside a flexbox container, one of them is Resizable. The bounds are set to parent (flexbox container). I have noticed that if you put static element as a first child, you are not able to make Resizable bigger (only smaller), see example: https://codesandbox.io/s/gifted-boyd-xrn1z?file=/src/index.js

However, if you switch the place, like here:

<div style={wrapperStyle}>
      <Resizable
        bounds="parent"
        style={style}
        defaultSize={{
          width: 200,
          height: 200
        }}
      >
        001
      </Resizable>
      <div style={siblingStyle}>002</div>
</div>

everything seems to work.

I would expect, the behaviour is the same regardless of children order.

[rolandjohann]

having the same issue, except that I lay out the flex as rows. When the resizable is the first element we can completely resize the element to the edges of the parent.

[colinking]

You may need to set boundsByDirection to true. This fixed this issue for my case, where my component was resized vertically from the top with a fixed bottom.