DIV 'flex-box'要素が境界を越えて押し出されます。iOS

Question

ok私は前に見たことのないアイブという問題があります。 私はコンテンツを持つh1タグとpタグを持っています。これらはすべて.mainwrapperと呼ばれるdivクラスにラップされています。このクラスは、再び.mainクラスを持つ別のdivで折り返され、境界効果を作成します。
CSS

p 
{ 
    font-family:Play; 
    width: 90%; 
    height: auto; 
    margin:0 auto; 
    font-size:22px; 
} 

h1 
{ 
    font-family:Stardos Stencil; 
    font-size:48px; 
    width: 90%; 
    margin:0 auto; 

} 
.main 
{ 
display: flex; 
display: -webkit-flex; 
display: -ms-flexbox; 
flex-direction: column; 
padding-top:40px; 
padding-bottom:40px; 
z-index: 20; 
width: 100vw; 
right: 0; 
left: 0; 
height: auto; 
margin: 0 auto; 
text-align: center; 
background:rgb(30,30,30); 
color: white; 
position: relative; 
transition: visibility 2s, opacity 1s linear; 
box-shadow:0 -8px 8px rgb(0,0,0); 
} 
.mainwrapper 
{ 
display: flex; 
display: -webkit-flex; 
display: -ms-flexbox; 
over-flow: contain; 
flex-direction: column; 
position: relative; 
width: 90vw; 
height: auto; 
background-color: rgba(0,0,0,0.3); 
margin:0 auto; 
} 

HTML

<div class="main"> 
    <div class="mainwrapper"> 
     <h1>About Us</h1> 
     <br> 
     <p>Based in Greeley, Colorado and Operating In and Around the Greater Wattenberg Shale and DJ Basin. We Specialize in BOP Stack Testing, BOP and Accumulator Service and Repair, Gate Valve Repair, Hydraulic Torque Wrench Service, Production Completion and Much More. <a href="contact.php">Just Ask!</a> Pathfinder Pressure is a Veteran Owned and Operated Business, We bring Integrity and Experience to Every Drilling and/or Completion Operation. Our Equipment is State of the Art, Thoughtfully Engineered, and Meticulously Maintained. We Arrive On Time, Ready to Work, with Safety as Our First Priority in Everything We Do. We Maintain a Flawless Safety Record with ZERO Recordable Incidents, That's a Record We Plan to Keep.</p><br> 
    </div> 
    </div> 

私はautoに設定され、両方のdivの高さを持っている要素が応答性であることをするように。これはデスクトップのブラウザでうまくいきますが、私のiPhone 7では、段落の内容が両方のdivの下端を押し出します。私はこの問題をメディアクエリを使って修正し、mainwrappersの高さを700pxのようなものに設定することができますが、これは本当に「反応的」なアプローチではありません。 ありがとう

Answer 1

私はこれを残念ながらテストすることはできませんが、これが動作するかどうか教えてください。基本的には、flex-direction: column;を.mainから削除し、flex: 1;を追加しただけです。私は最近フレックスボックスの使用を始めました.Safariは常に問題のメーカーです。それでも問題が解決しない場合は、.mainの表示をinline-blockに変更してみてください。最後に、まだ運がない場合は、高さのプロパティを.mainwrapperと.mainから削除してみてください。彼らは必要ではありません。

p 
{ 
    font-family:Play; 
    width: 90%; 
    height: auto; 
    margin:0 auto; 
    font-size:22px; 
} 

h1 
{ 
    font-family:Stardos Stencil; 
    font-size:48px; 
    width: 90%; 
    margin:0 auto; 

} 
.main 
{ 
flex: 1; 
display: -webkit-flex; 
display: -ms-flexbox; 
padding-top:40px; 
padding-bottom:40px; 
z-index: 20; 
width: 100vw; 
right: 0; 
left: 0; 
height: auto; 
margin: 0 auto; 
text-align: center; 
background:rgb(30,30,30); 
color: white; 
position: relative; 
transition: visibility 2s, opacity 1s linear; 
box-shadow:0 -8px 8px rgb(0,0,0); 
} 
.mainwrapper 
{ 
display: flex; 
display: -webkit-flex; 
display: -ms-flexbox; 
over-flow: contain; 
flex-direction: column; 
position: relative; 
width: 90vw; 
height: auto; 
background-color: rgba(0,0,0,0.3); 
margin:0 auto; 
} 

Answer 2

ケレン・レスターは、彼の答えの下のコメントで正しいです。 これを読んでいる人は、display：flex-box for EVERY divを使わないでください。 SafariのiOSはそれを気に入らない。