fix: use flexbox to style webview (backport: 3-0-x) (#14408)

* fix: use flexbox to style webview

* docs: remove notes on browserplugin based webview

docs/api/webview-tag.md

@@ -65,30 +65,11 @@ and displays a "loading..." message during the load time:
 ## CSS Styling Notes
 
 Please note that the `webview` tag's style uses `display:flex;` internally to
-ensure the child `object` element fills the full height and width of its `webview`
-container when used with traditional and flexbox layouts (since v0.36.11). Please
-do not overwrite the default `display:flex;` CSS property, unless specifying
+ensure the child `iframe` element fills the full height and width of its `webview`
+container when used with traditional and flexbox layouts. Please do not
+overwrite the default `display:flex;` CSS property, unless specifying
 `display:inline-flex;` for inline layout.
 
-`webview` has issues being hidden using the `hidden` attribute or using
-`display: none;`. It can cause unusual rendering behaviour within its child
-`browserplugin` object and the web page is reloaded when the `webview` is
-un-hidden. The recommended approach is to hide the `webview` using
-`visibility: hidden`.
-
-```html
-<style>
-  webview {
-    display:inline-flex;
-    width:640px;
-    height:480px;
-  }
-  webview.hide {
-    visibility: hidden;
-  }
-</style>
-```
-
 ## Tag Attributes
 
 The `webview` tag has the following attributes:

lib/renderer/web-view/web-view.js

@@ -61,8 +61,7 @@ class WebViewImpl {
 
   createInternalElement () {
     const iframeElement = document.createElement('iframe')
-    iframeElement.style.width = '100%'
-    iframeElement.style.height = '100%'
+    iframeElement.style.flex = '1 1 auto'
     iframeElement.style.border = '0'
     v8Util.setHiddenValue(iframeElement, 'internal', this)
     return iframeElement