在我的笔记本电脑上，所有内容都保存在各自的容器中，每列的高度都很好。当我在iPhone上加载页面时，高度变得不同，内容互相溢出，主要内容（第一行事件之后的所有内容）最终在白色容器下面。 Here是链接，如果有人想查看html / css（我不确定相关内容是什么，并且不想让帖子变得混乱，而代码并没有＆＃39;我需要在这里）。
This is what is wrong with the webpage on mobile.
非常感谢任何帮助。我对flexbox非常陌生，所以我为任何没有意义的css代码道歉。
HTML
<div class="fluid white large">
<h2>Welcome</h2>
<p>Check <a href="#">Grapevine</a> for updated information on Board of Education presentations and topics of interest!</p>
<div>
<hr/>
<h2>Upcoming Events</h2>
<div class="grid">
<div class="fluid">
<h3>Wednesday, May 4, 2016</h3>
<ul>
<li>AP Exam: English Lit & Composition</li>
<li>AP Exam: Japanese Lang & Culture</li>
<li>AP Exam: Physics 2 - Algebra Based</li>
</ul>
</div>
<div class="fluid">
<h3>Thursday, May 5, 2016</h3>
<ul>
<li>Music Booster</li>
<li>AP Exam: Calculus AB</li>
<li>AP Exam: Calculus BC</li>
<li>AP Exam: Chinese Lang & Culture</li>
</ul>
</div>
</div>
<div class="grid">
<div class="fluid">
<h3>Friday, May 6, 2016</h3>
<ul>
<li>AP Studio Art Last Day to Submit Digital Port</li>
<li>AP Exam: German Lang & Culture</li>
<li>AP Exam: US History</li>
<li>AP Exam: European History</li>
</ul>
</div>
<div class="fluid">
<h3>Monday, May 9, 2016</h3>
<ul>
<li>AP Exam: Music Theory</li>
</ul>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
<div>
<hr/>
<h2>News</h2>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SM_1_srcitizendancing.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Sr. Citizen Prom - Evening at Gastby's</h3>
<p>Highland CSD and Interact Club Present All Highland Sr. Citizens Welcome! Please RSVP to Carly...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_6264MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Music Honor Students Perform in Annual Recital</h3>
<p>The Highland High School auditorium was alive with the sound of music during the Eighth Annual Tri-M Music Honor...</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n d">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG_8095MEDIA.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland High School Names Top 10 Scholars in Class of 2016</h3>
<p>Highland High School (HHS) has announced the top ten students, including the valedictorian and salutatorian, of the... </p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
<div class="fluid n">
<div class="grid">
<div class="fluid" style="align-self: center;">
<img src="http://highland-k12.org/photos/news/SMALL-SMIMG959446.jpg" />
</div>
<div class="fluid newsLarge">
<h3>Highland's Soccer Teams Raise Funds for a Team in Africa</h3>
<p>The Girls and Boys Varsity Soccer teams at Highland High School (HHS) helped get the ball rolling so that a soccer..</p>
<p><a href="#">View the full story...</a></p>
</div>
</div>
</div>
</div>
<p><a class="btn" href="#">View all events</a></p>
</div>
CSS STYLING ...
#container > #brand {
overflow: hidden;
background-color: #3d3d3d;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: center;
width: 100%;
}
#container > nav > ul {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #3d3d3d;
}
#container > nav > ul > li {
list-style: none;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
font-weight: bold;
background-color: #3d3d3d;
}
#content {
margin: 10px auto;
background-color: #3d3d3d;
width: 80%;
color: white;
padding: 10px;
text-align: center;
height: 100%;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid {
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.grid > .fluid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
height: 100%;
}
.grid > .large {
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
border: 2px solid gray;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.grid > .newsLarge {
-webkit-box-flex: 4;
-webkit-flex-grow: 4;
-ms-flex-positive: 4;
flex-grow: 4;
}
答案 0 :(得分：0)
我解决了它！
谢谢@Michael_B的帮助......主要是。我添加了所有供应商前缀，然后在我的CSS编码中发现了一个错误（有一个额外的“高度：100％;”导致一些主要的间距问题）。