La combinaison Flex + débordement ne fonctionne pas dans Safari 10

Question

Je n'arrive pas à faire fonctionner cette combinaison Flex + Débordement dans Safari.

jsFiddle: https://jsfiddle.net/9dtrr84c/2/

<div class="container-fluid"> 
    <div class="row parent"> 
    <div class="col-12 col-sm-7 left"> 
     <div class="row top"> 
     <div class="col">Top</div> 
     </div> 
     <div class="row bottom"> 
     <div class="col-sm-7 my-list-container"> 
      <ul class="list-group"> 
      <div class="list-group-item dummy-item">Dummy item</div> 
      <div class="list-group-item dummy-item">Dummy item</div> 
      <div class="list-group-item dummy-item">Dummy item</div> 
      </ul> 
     </div> 
     <div class="col-sm-5 flex-end"> 
      This should be flex end 
     </div> 
     </div> 
    </div> 
    <div class="hidden-xs-down col-sm-5 right"> 
    </div> 
    </div> 
</div> 

Et css:

/* With bootstrap v4 */ 
/* https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */ 

html, 
body, 
.container-fluid, 
.parent { 
    height: 100%; 
} 

.dummy-item { 
    height: 300px; 
} 

.left { 
    display: flex; 
    flex-direction: column; 
} 

.left .top { 
    flex-shrink: 0; 
} 

.left .bottom { 
    flex-shrink: 1; 
    flex-basis: 100%; 
    display: flex; 
} 

.my-list-container { 
    overflow-y: auto; 
} 

.flex-end { 
    align-self: flex-end; 
} 

La liste devrait étendre à prendre autant d'espace que possible et trop-plein avec une barre de défilement.

Cela fonctionne dans Chrome comme prévu. Ne semble pas être un "flex non supporté par cette version de Safari" car j'utilise 10.1.2. Je n'ai pas besoin d'un ancien support de navigateur, donc une solution moderne est acceptable

Toute aide est appréciée! Merci d'avance!

Answer 1

réussi à le résoudre: https://jsfiddle.net/9dtrr84c/8/

• Ajouté flex-wrap: nowrap; à conteneur parent