Open ctrlplusb opened 7 years ago
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.
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.