The webview element and the dimensions of underlying object in shadow DOM


I’m currently playing around with Electron and <webview> elements, but I appear to have stumbled upon an issue to which I know no workaround. I fear I may be missing some fundamental knowledge here :pensive:

To illustrate the issue in the title, my primary HTML in the renderer is a simple flexbox #flexbox with a title bar #titlebar and another div #out. The title bar should stay the same size, no matter the window size, while the other div should fill the remaining space. Hence:

    width: 100%;
    height: 100%;
    flex-direction: column;
#titleBar { flex: 0 0 21px; ... }
#out { flex: 1 1 }

(the flex values will be modified later on when I add more divs to vie for the same space)

Inside #out is a single <webview> whose src is a barebones HTML document that only contains a style node in the <head>:

html, body
    height: 100%;
    width: 100%;
    margin: 0;
body { background: #5EB63F; }
body * { box-sizing: border-box; }

However, the embedded page does not properly expand to the height of the #out div. I’ve tried setting height: 100% on the <webview> element, and even tried penetrating the shadow root to style the <object> element but none of these options work. Anyone have any ideas?

As a reference, here is what it looks like with only the most basic styling: (observe that the embedded webpage does not even take the entire width, but I can style width: 100% on the <object> in the shadow root and it solves the problem)

I’m hoping someone can shed some light on this matter :smiley:


Me too. Before I saw your question, I posted something possibly vaguer here: Styling and layout of a webview

What I have noticed is that setting position:absolute seems to make it respond better to CSS layout.

Maybe in a few days we need to create an issue in github. Maybe it’s a problem with electron, not us.