flex properties not working on safari

Question

I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.

This is my html:

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

        </form>
    </div>
</div>

and this is my css:

@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 > .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;
}

and it works in chrome, ie edge and in this fiddle, but not in safari.

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

any ideas on how to make this work in safari?

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.

See this can any help - https://css-tricks.com/using-flexbox/ — pradeep1991singh, Nov 22 '16 at 17:06
possible guidance: [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/q/35137085/3597276) — Michael Benjamin, Nov 22 '16 at 17:30
I think this solves it http://stackoverflow.com/questions/29986668/flex-wrap-not-working-as-expected-in-safari — user3494047, Nov 22 '16 at 19:18

score 1 · Accepted Answer · edited May 23 '17 at 12:08

I changed .flex-row css rules to:

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

and changed the flex-row first child css rules to:

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

and then it works.

I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy

score 0 · Answer 2 · answered Nov 22 '16 at 19:23

Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:

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

similar for all other rules.

flex properties not working on safari

2 Answers2