Question

我的情况是各种各样的浏览器都很好地实现了我的弹性布局，但Firefox并没有参加派对。

在此codepen中：https://codepen.io/davewallace/pen/WOPqQB（为清楚起见，我删除了浏览器前缀），您可以看到.content元素已应用溢出，而在其他浏览器中，当其元素的内容时，会在此元素上生成滚动条在弯曲以填充视口时，它大于填充的空间。

（codepen使用SCSS，以下代码片段就是结果）

＆＃13;

html, body {
  padding: 0;
  margin: 0;
}

html * {
  box-sizing: border-box;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  background: cyan;
}

.top {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  background: gray;
}
.top .inner {
  max-width: 1440px;
  border: 1px dashed black;
}
.top .inner .nav {
  height: 60px;
  border: 1px solid gold;
}

.bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0px;
  background: pink;
}

.left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 255px;
          flex: 0 0 255px;
  background: chocolate;
}

.content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  background: gold;
  padding: 30px;
  overflow: auto;
}
.content .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1155px;
  border: 1px dashed black;
}
.content-left {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 66.6%;
          flex: 1 0 66.6%;
  background: white;
}
.content-right {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 33.3%;
          flex: 1 0 33.3%;
  background: pink;
}

.sideblock {
  margin: 30px;
  padding: 20px;
  background: white;
}

＆＃13;

<div class="container">
	<div class="site-msg">site msg<br />site msg</div>
	<div class="top">
		<div class="inner">

			<div class="nav">top nav</div>
			<select>
				<option>English</option>
				<option>Hebrew</option>
			</select>

		</div>
	</div>
	<div class="bottom">
		<div class="left">left nav</div>
		<div class="content">
			<div class="inner">

				<!-- regular content -->
				<div class="content-left">
					<ul>
						<li>content item</li>
						<li>supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
						<li>content item</li>
					</ul>
				</div>
				<div class="content-right">

					<div class="sideblock">
						side block
					</div>
					<div class="sideblock">
						side block
					</div>
					<div class="sideblock">
						supercalifragilisticexpialidocious
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</div>

＆＃13;

另一方面，Firefox不会这样做，而只是滚动整个身体元素。

关于如何为Firefox修复此问题的任何想法？根本原因修复是可取的，黑客考虑但不是真正可取。

为什么Firefox不对我指定的flex子元素应用溢出？

0 个答案: