Pitfalls when using flex layouts

[ctrlplusb]

trafficstars

The behaviour of element-resize-detector causes a div to be injected which helps with tracking. Unfortunately this can break your flex layouts. To resolve you need to create a wrapping div around the flex layout div.

[mattjohnsonpint]

Just wanted to share my experience in case it helps others. I also ran into this, but more than just needing any old div, I wanted to take up the whole width and height of the client area created by the flexbox. Unfortunately, this did't work so well with Edge (it would grow on resize, but not shrink), until I tried using relative and absolutely positioned divs. Now it works great in all browsers I tested.

<SizeMe monitorHeight>
  {({ size }) => 
    <div style={{ position: 'relative', height: '100%' }}>
      <div style={{ position: 'absolute', width: '100%', height: size.height }}>
        {/* remaining content here */}
      </div>
    </div>
  }
</SizeMe>

My size-aware content is mostly using react-window controls, passing the size.height to the height prop.

This works great for me. YMMV, of course.