Solución Definitiva: El WebView de Electron no llena el contenedor

Si estás desarrollando con Electron y el tag <webview> se queda con un tamaño minúsculo (usualmente 300x150 o simplemente no llena el 100%), no estás solo. Es uno de los bugs de renderizado más frustrantes y persistentes del framework.

¿Cuál es el Problema?

El problema es que el elemento <webview> no es un tag HTML estándar; es un componente que Electron inyecta usando un Shadow DOM complejo. A menudo, el "Guest Renderer" (el proceso que renderiza el contenido dentro del webview) no sincroniza correctamente sus dimensiones con el "Window Host" (la ventana principal) durante el primer renderizado o tras cambios dinámicos.

¿Dónde es Común?

• Estructuras basadas en Flexbox donde el webview tiene flex: 1.
• Aplicaciones que ocultan/muestran/redimensionan el webview dinámicamente (display: none).
• Versiones recientes de Electron que han endurecido el aislamiento de procesos.

¿Por qué sucede?

Sucede porque el motor de Chromium espera un evento de layout reflw para recalcular el tamaño del GuestView. Si el contenedor padre se expande de forma fluida (como en Flexbox), a veces el WebView "se duerme" y mantiene sus dimensiones por defecto, ignorando las reglas de CSS de su contenedor padre.

La Solución (HardSoftware)

Para solucionarlo de forma infalible, hay que atacar dos frentes: Estructura Rígida y Despertador de Layout.

1. CSS Grid (Estructura Rígida)

En lugar de Flexbox, usa CSS Grid en el contenedor principal. Grid impone dimensiones exactas en celdas, lo que fuerza al motor de renderizado a reconocer el espacio disponible.

body {
    display: grid;
    grid-template-rows: 40px 1fr; /* Barra superior fija, resto para el webview */
    height: 100vh;
    margin: 0;
}

webview {
    grid-row: 2;
    width: 100%;
    height: 100%;
}

2.Despertador de Layout

Incluso con Grid, el webview puede necesitar un recordatorio. Dispara un evento de resize manual después de que el elemento se muestre o se adjunte al DOM.

function fixWebView() {
    webview.style.display = "flex"; // Forzar visibilidad
    setTimeout(() => {
        window.dispatchEvent(new Event('resize'));
    }, 50); // 50ms son suficientes para despertar al GuestRendererr
}

Conclusión

No funcionan metodos estandares como con calc() o alturas fijas en píxeles. Debe usar Grid para definir el área y Resize para forzar el renderizado. Es la única forma de manipular satisfactoriamente las dimensiones del WebView de manera dinamica.