flex properties not working on safari
<p>I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.</p>

<p>This is my html:</p>

<pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-row"&gt;
        &lt;h1 class="brandname"&gt;Hello&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="flex-row"&gt;
        &lt;form&gt;
            &lt;!-- &lt;div class="search centered"&gt; --&gt;
            &lt;div class="search"&gt;
                &lt;div class="input-container"&gt;
                    &lt;input type="text" name="query" class="searchbar" /&gt;
                    &lt;button type="submit" class="search-button"&gt;Search&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and this is my css:</p>

<pre><code>@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.flex-container{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;

}

.flex-row {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex: 1;
    -webkit-flex: 1;
}

form{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    flex: 1;
    -webkit-flex: 1;
}

.search{
    display: flex;
    display: -webkit-flex;
    flex: 0 1 455px;
    -webkit-flex: 0 1 455px;
}

.input-container{
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;
    min-width: 0;
}

.searchbar{
    flex: 1;
    -webkit-flex: 1;
    min-width: 0;
}


.flex-container &gt; .flex-row:first-child{
    flex: 0 1 100%;
    -webkit-flex: 0 1 100%;
}

.brandname {
  position: relative;
  font-size: 500%;
  font-family: 'Lato', sans-serif;
  color: #1f0e3e;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 5%;
}
body {
    margin: 10px;
}

.input-container{
    /*float: left;*/
    /*display: block;*/
    flex: 1;
    -webkit-flex: 1;
    outline-style: solid;
    outline-color: #e3e3e3;
    outline-width: 1px;
}

.searchbar{
    margin-left: 5px;
}

.search button {
    background-color: rgba(152,111,165,0.38);
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    border-radius: 0px;
    /*overflow: hidden;*/
    outline-width: 1px;
    outline-style: solid;
    outline-color: #e3e3e3;
    color: white;
}

.search input{
    outline-width: 0px;
outline-style: none;
border-width: 0px;
}
</code></pre>

<p>and it works in chrome, ie edge and in <a href="https://jsfiddle.net/ndbomoef/2/" rel="nofollow noreferrer">this</a> fiddle, but not in safari.</p>

<p>In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.</p>

<p>any ideas on how to make this work in safari?</p>

<p>One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.</p>