Not working with react-create-app about re-flex

[leefsmp]

Ok, I'll mention that in the doc... As you said this is not a bug, a ReflexContainer is supposed to be used in a parent component which should have an height, it doesn't necessarily has to be specified as a fixed value (like in the demo I sent) it could be "100vh" or itself set to "100%" of its parent ... Thanks btw!

[leefsmp]

Can you be a bit more specific as to what is not working on your side? I created a basic test project using react-create-app and reflex, works fine as far as I can tell... Here is the link to my test project.

[stenbln]

My vertical splitter was not visible at all and horizontal was visible but not moveable. However, I've tracked down the bug. In src/lib/reflex-styles.scss the height and width of ReflexContainer are set to 100% of the parenting element. Which is not there! The quick fix is just to add a parenting div and set the desired height there.

So instead of:

      <ReflexContainer orientation="vertical">

        <ReflexElement className="left-pane">
          <div className="pane-content">
            Left Pane (resizeable)
          </div>
        </ReflexElement>

        <ReflexSplitter/>

        <ReflexElement className="right-pane">
          <div className="pane-content">
            Right Pane (resizeable)
          </div>
        </ReflexElement>

      </ReflexContainer>

we might have something like this:

<div style={{height:500}}>
      <ReflexContainer orientation="vertical">

        <ReflexElement className="left-pane">
          <div className="pane-content">
            Left Pane (resizeable)
          </div>
        </ReflexElement>

        <ReflexSplitter/>

        <ReflexElement className="right-pane">
          <div className="pane-content">
            Right Pane (resizeable)
          </div>
        </ReflexElement>

      </ReflexContainer>
</div>

Its not really a bug but I think it would be nice if it is mentioned in the documentation. Awesome library btw!