CODEWITHSUNDEEP
htmlcsssafariflexbox
user3494047
user3494047

Reputation: 1693

Flexbox row wrap not working in Safari

using OSX 10.12.4 safari version 10.1 and flex row wrap is not working as expected. I have seen the other questions on here about row wrap not working in safari, but it has not helped me so far.

Here is my html:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header {
  flex: 1 100%;
  -webkit-flex: 1 100%;
  -moz-flex: 1 100%;
}

.body {
  flex: 1;
  -webkit-flex: 1;
}
<div class="container">
  <div class="header">
    header
  </div>
  <div class="body">
    body
  </div>
</div>

Here is a fiddle example

Upvotes: 1

Views: 2414

Answers (1)

dippas
dippas

Reputation: 60563

Do the same in .body as you did in the .header.

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  -webkit-flex: 1 100%; /* safari fix */
}
<div class="container">
  <div class="header">
    header
  </div>
  <div class="body">
    body
  </div>
</div>

Upvotes: 1

Related Questions