Vertical rule grow infinite !

I think the vertical rule have some bug ? it seem grow infinitely when is compute rendering! Horizontal work fine !

here preview gif code used in my projet look like this ps:i also try many css styles, without success.

const Camera = ({ children }) => {
	const pos = store({
		x: 0,
		y: 0,
	});
	return (
		<>
	<Box
			className='content'
			bgcolor='grey.700'
			display='flex'
			justifyContent='top'
			flexDirection='column'
			style={{ minWidth: '100%', width: 0, minHeight: '100%', height: 0 }}
		>
			<Box bgcolor='grey.200'>
				<div className='Ruler' style={{ width: '100%', height: '24px' }}>
					<Ruler type='horizontal' scrollPos={pos.x} />
				</div>
			</Box>
			<Box
				className='content'
				bgcolor='grey.700'
				display='flex'
				justifyContent='top'
				flexDirection='row'
				flexGrow={1}
			>
				<Box m={0.5} display='flex' bgcolor='grey.200'>
					<div className='Ruler' style={{ width: '28px' }}>
						<Ruler type='vertical' scrollPos={pos.y} />
					</div>
				</Box>
				<Box flexGrow={1} bgcolor='grey.200'>
					<TransformWrapper
						options={{
							limitToBounds: true,
							limitToWrapper: true,
							minScale: 1,
							maxScale: 2,
						}}
						onPanning={(e) => {
							pos.x = e.positionX;
							pos.y = e.positionY;
						}}
					>
						<TransformComponent>
							<div>Camera:</div>
							<div>{children}</div>
						</TransformComponent>
					</TransformWrapper>
				</Box>
			</Box>
		</Box>
		</>
	);
};
export default view(Camera);

is this a know issue ? or if you want i can take time to make you a demo ? thanks again

[daybrush]

@djmisterjon

Add

height: calc(100% - 24px);

to Muibox-root-18

[daybrush]

@djmisterjon I would really appreciate it if you did. It does not reproduce well.