为什么我在 Firefox (81.0.1) 中看到垂直滚动条，但在 Chrome (78.0.3904.108)、Edge、Safari、Qtweb 中看不到？答案

【问题标题】：Why do I see a vertical scrollbar in Firefox (81.0.1), but not in Chrome (78.0.3904.108), Edge, Safari, Qtweb?为什么我在 Firefox (81.0.1) 中看到垂直滚动条，但在 Chrome (78.0.3904.108)、Edge、Safari、Qtweb 中看不到？
【发布时间】：2021-01-21 12:04:56
【问题描述】：

考虑以下css、html：

header, nav { display: block; }                                     /* IE<9 */
html, body, #main, iframe { height: 100%; }                         /* iframe height: 100% of containing divs */
body,iframe { margin: 0; border: 0; }                               /* seamless */
iframe      { display: block;                                       /* avoid extra pixels/scrollbar in old style flexbox model (Safari, QtWeb) */
              width: 100%; }                                        /* width: IE, Edge */

#main       { 
              display: -webkit-box; -webkit-box-orient: block-axis; /* old style flexbox model, in vertical direction */
              display: -webkit-flex; -webkit-flex-direction:column; /* flexbox Apple */
              display: -ms-flexbox; -ms-flex-direction: column;     /* flexbox IE 10 */
              display: flex; flex-flow: column; }                   /* flexbox, direction */
              
iframe      { -webkit-box-flex: 1;                                  /* flex item old style, prevent appearance y-scrollbar */
              flex: 0 1 auto; }                                     /* Chrome , Qtweb */    
 
header      {background-color: lightgrey;}  
nav         {background-color: grey;}
iframe      {background-color: red;}
footer      {background-color: grey;}

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Why do I see a vertical scrollbar in Firefox (81.0.1), but not in Chrome (78.0.3904.108), Edge, Safari, Qtweb</title> 


</head>
<body>
<div id="main" role="main">
    <header>
        <h1>Test iframe height (Windows 10)</h1>
        <h2>No y-scrollbar is expected</h2>
    </header>
    <nav><a>Menu here</a></nav>
    <iframe name="content" src="https://example.com/"> </iframe>
    <footer><h1>Footer here</h1></footer>
</div>
</body></html>

在 Chrome 和我在 Windows 10 上测试过的任何其他浏览器中，iframe 的内容被缩小以适应周围的 div。但在较新版本的 Firefox 中，这种行为发生了变化。我该如何解决这个问题？

【问题讨论】：

标签： html css firefox iframe

【解决方案1】：

替换

弹性：0 1 自动

通过

弹性：1 0 0

这将以零高度启动 iframe，然后扩展。

【讨论】：