No podía pensar en una buena manera de redactar el título. Permítanme comenzar con una imagen para un diseño que he estado tratando de obtener durante una semana. Es para una aplicación de videoconferencia. Me vendría bien un poco de ayuda para averiguar cómo se puede unir esto.

Así que lo primero son las dos barras laterales con las flechas. Esos necesitan expandirse y colapsar. Básicamente saqué de W3 para que funcionen de forma independiente.

Luego creé una cuadrícula con dos filas flexibles. Algo como esto:

 .Container { display: grid; grid-template-rows: 1fr auto; } // Chat, Video, etc. .MeetingContainer { display flex; } .SideMenu { flex-shrink: 1; } .MainVideo { flex-grow: 1; } .SettingsMenu { display: flex; justify-content: space-between; }

Anteriormente también intenté poner todo en una configuración de cuadrícula/subcuadrícula. En su mayoría solo usé este generador . No tengo ningún problema con el menú de configuración, es bastante fácil dividirlo en consultas de medios.

Aquí está el problema con el que me estoy metiendo. Mantener el video (es la etiqueta de video HTML5) en el medio receptivo. Y mantener contenidas las alturas de los elementos que tienen desbordamiento sin arruinar todo el diseño. Básicamente, estoy tratando de hacer que todo este contenedor sea visible en cualquier tamaño de pantalla.

Para el video, pensé que una simple height: 100%, width: 100%, object-fit: cover funcionaría. Pero la altura no se encoge. Algo como esto en mi patio de recreo/maqueta actual:

Justo encima de este texto es donde está el video. Observe cómo el color de fondo se encoge detrás de los "botones" y quedan atrapados debajo del video.

En cuanto a los elementos de desbordamiento, no sé cómo establecer una altura para ellos sin que sea un px estático. Por ejemplo, la idea es hacer que 'Mensajes de chat' y 'Compartir archivos' sean el 50 % de la fila de la cuadrícula. Y desbordamiento: automático; con respecto a esa altura. Lo cual no funciona muy bien incluso con las consultas de los medios.

Se puede hacer esto? Prefiero seguir por el camino que estoy, pero si no puede funcionar, no puede funcionar. ¿O debería volver a trabajarlo para que sea más realista? ventanas emergentes? :( ¿Quizás crear iframes? No estoy seguro de que eso ayude. Me estoy quedando sin ideas.

Estoy usando reaccionar aquí con módulos CSS, por lo que puedo ser programático. Pero a falta de una pila de detectores de eventos para establecer la altura en cada elemento, no estoy seguro de cómo hacer un uso limpio de eso.