Flexbox在我的网站的某些部分在Safari中工作，而不是在其他部分

Question

我是一个相当新的设计师，我使用flexbox重新设计了我的网站。它在其他浏览器中正确呈现，即Chrome，IE，FireFox由于一些轻微的黑客攻击。在Safari中，某些部分按预期呈现，有些部分没有正确分配空间。我已经尝试了我能想到的一切，并且无法找到一个不会破坏其他浏览器布局的修复程序。有什么建议？以下是其中一个部分的代码......

<section class="flex-container">
    <header>
    <div class="header1">
     <img id="profile" src="images/profile.png" width="250px">
    <h1>content</h1>
    <h2>content</h2>
        </div>
    <div class="header2">
    <ul class="socialmedia">
        <li class="sm-icon1"><a href="https://www.facebook.com/danielthecre8r/"><img src="images/facebook_icon.png"></a></li>
        <li class="sm-icon2"><a href="https://twitter.com/danielthecre8r"><img src="images/twitter_icon.png"></a></li>
        <li class="sm-icon3"><a href="https://www.linkedin.com/in/danielthecre8r"><img src="images/linkedin_icon.png"></a></li>
    </ul>
    </div>
    </header>
    </section>


.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
    -ms-flex-direction: column;
        flex-direction: column;
}

/* Landing Styles */

header {
height: 1000px;
background: url(images/landing_background2.png) center no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;

}

.header1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 10 1 600px;
flex: 10 1 600px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
        justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
    -ms-flex-align: center;
        align-items: center;


}

.header2 {
height: 300px;
-webkit-flex: 1 1 1px;
flex: 1 1 1px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: 20px;

}

.header2 ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
    -ms-flex-pack: justify;
        justify-content: space-between;

}
header h1 {
text-align: center;
font-size: 500%;
}

header h2 {
text-align: center;
font-family: "Merriweather", serif;
font-size: 150%;
letter-spacing: .1em;

}

在Safari中呈现的方式如.header1和.header2在页面左侧相互编码为flex-direction: row; flex: 1 1 auto; justify-content: flex-start;。