<p dir="auto">The browserplugin object width expands as expected when  is used within a flexbox layout, but the height stays fixed at 150px - the height of the browserplugin object should also expand to the height of the parent .</p>
<ul dir="auto">
<li>Electron version: 0.36.9</li>
<li>Operating system: Windows 7 x64, Windows 10 x64</li>
</ul>
<p dir="auto">A webview's object node doesn't get stretched vertically when the webview is part of a flexbox.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f16a21e8d1725050af0d281f09891b23459085ca12b514ad3a37fc13b346e130/687474703a2f2f7075752e73682f6d63784d6a2f623466326533633064332e706e67"><img src="https://camo.githubusercontent.com/f16a21e8d1725050af0d281f09891b23459085ca12b514ad3a37fc13b346e130/687474703a2f2f7075752e73682f6d63784d6a2f623466326533633064332e706e67" alt="Webview is full size" data-canonical-src="http://puu.sh/mcxMj/b4f2e3c0d3.png" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/aac6eae6bc302e3d21d5353591f831e560db18014b40d73cc5de89cdfa806a8e/687474703a2f2f7075752e73682f6d637858342f653232303832383830322e706e67"><img src="https://camo.githubusercontent.com/aac6eae6bc302e3d21d5353591f831e560db18014b40d73cc5de89cdfa806a8e/687474703a2f2f7075752e73682f6d637858342f653232303832383830322e706e67" alt="Object node isn't full size of webview" data-canonical-src="http://puu.sh/mcxX4/e220828802.png" style="max-width: 100%;"></a><br>
(the images show a different bug also: the webview is obviously being cut off at the bottom. this fixes itself upon resizing the window.)</p>
<p dir="auto">I was able to fix this by adding <code class="notranslate">display: flex</code> to the webview and disabling the <code class="notranslate">height: 100%;</code> of the object node, except that was using dev tools. I can't find a way to style the object node (neither JS nor CSS seem to be ways to get to it) so this isn't a real solution.</p>
<p dir="auto">That given, the only solution I can think of is being able to access the object node via JS. Even if it is annoying to have to set styling w/ JS, it'd still be a fair workaround.</p>
<p dir="auto">I'm using v0.36.1 on WIndows 7, for any help that could (somehow) be.</p>
<p dir="auto">It's not hard to replicate, and nothing else affects it outside of the html document and styling, so here's a document (just setup the quick start app using this for the page) that showcases this.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        .container {
            height: 100%;
            display: flex;
            flex-flow: column;
        }
        webview {
            flex: 1 1 auto;
        }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class='container'&gt;
            &lt;webview src='https://www.google.com/'&gt;&lt;/webview&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
        <span class="pl-ent">html</span><span class="pl-kos">,</span> <span class="pl-ent">body</span> {
            <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
            <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
            <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
        }
        .<span class="pl-c1">container</span> {
            <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
            <span class="pl-c1">display</span><span class="pl-kos">:</span> flex;
            <span class="pl-c1">flex-flow</span><span class="pl-kos">:</span> column;
        }
        <span class="pl-ent">webview</span> {
            <span class="pl-c1">flex</span><span class="pl-kos">:</span> <span class="pl-c1">1</span> <span class="pl-c1">1</span> auto;
        }
        <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>='<span class="pl-s">container</span>'<span class="pl-kos">&gt;</span>
            <span class="pl-kos">&lt;</span><span class="pl-ent">webview</span> <span class="pl-c1">src</span>='<span class="pl-s">https://www.google.com/</span>'<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">webview</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>