Css 无法在react引导程序中正确显示视频组件

我正在尝试使用WebRTC构建一个两方调用应用程序。我的设计是

• 在非移动设备上，本地流将显示在左侧，远程流将显示在更大屏幕的右侧。他们将肩并肩

• 在移动设备上，流将被堆叠。当地的河流越来越小

我使用react引导将两个流定位在列中

我面临的问题是，当一方在非移动设备上时，来自非移动设备上的移动设备的流远远超过了窗口的大小。例如，请参见下图

//localStream sm={12}将确保视频将堆叠在移动设备上
//当从移动设备接收时，Temp尝试限制远程流的大小

我认为问题在于，远程流上的高度是自动的，并填充了列。我已经尝试在实际列上强制使用maxWidth和maxHeight，但收效甚微

我已经厌倦了视频宽度和高度的不同组合

有什么建议或建议吗

<Container fluid>
<Row>
            <Col sm={12} lg={2}>    //localStream sm={12} will ensure that the video will be be stacked on mobile 
                    <video style={{width: '50%', height : '100%', objectFit : 'contain'}} muted ref={userVideo} autoPlay playsInline />
            </Col>  
            <Col sm={12} lg={10} style={{ maxWidth : '80vw', maxHeight: '80vh'}}> //Temp attempt to limit the size of the remote stream when received from  mobile
                <video style={{ width: '100%',  height : 'auto', objectFit: 'contain'}} playsInline autoPlay ref={ref} />
            </Col>
        </Row>
</Container>