title: flex properties not working on safari
body: <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>