I am trying to make a simple ‘video chat’ web interface using React and Chakra UI, but i am met with a problem when trying to setup and style my pages.

My layout is very simple:

import React from "react";
import { Flex } from "@chakra-ui/react";
import { LocalVideoElement, RemoteVideoElement } from "../components/VideosHandlerComponent";

export default function VideoChatFlex() {
    return (
        <Flex id='videoContainer' direction='column' align='center' justify='center' maxHeight={"100px"} >
            <LocalVideoElement />
            <RemoteVideoElement />
        </Flex>
    );
}

The video elements are made as such :

export function LocalVideoElement() {

    const streamInfo = GetStreamInfo();

    const [localVideoElement, setLocalVideoElement] = useState<HTMLVideoElement | null>(null);
    useEffect(() => {
        if (localVideoElement && streamInfo.localStream) {
            localVideoElement.srcObject = streamInfo.localStream;
        }
    }, [localVideoElement, streamInfo.localStream]);


    return (
        <video
            id='localVideo'
            ref={(video) => setLocalVideoElement(video)}
            controls={false}
            autoPlay
            playsInline
            muted
        />
    );
}

I’m running into a problem when trying to limit the size of the videos to the page’s height, when the video elements seem to ignore all height limits.

For example, I am setting the maxHeight of my container to 100px , but as soon as the video loads the video element grows to 480 pixels, while the container stays at 100px. The “overflowing” part of the video elements is displayed as a dashed purple element in chrome devtools (available space to expand apparently)

However, if I put the size requirement on the width (maxWidth={"100px"}) then everything is fine and the videos are sized to fit within the container.

Am I missing something here? How can I fix that?