フレックスボックスの問題Safari 10.0.1

フレックスボックスをテストするのにsome code set up over at jsBinがあります。それは私がそれを投げた（IE11を含む）eveyブラウザで問題なく動作しますが、Safari 10.0.1では.img要素は伸びませんその親要素の高さ何か案は？フレックスボックスの問題Safari 10.0.1

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    body { 
     font-family: Arial, sans-serif; 
     background: #f7f7f7; 
    } 

    h1 { 
     padding-left: 20px; 
    } 

    .text { 
     font-size: 12px; 
     font-family: serif; 
     text-align: center; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="article"> 
     <div class="figure"> 
      <div class="img"> 
      <img src="http://json.tv/images/general/2014/09/08/thumbnail-20140908100224-3296.jpg" /> 
      </div> 
     </div> 

     <div class="text"> 
      <span class="cat">Lifestyle</span> 
      <h1> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      </h1> 
      <span class="date">6. 6. 1966</span> 
     </div> 
     </div> 
    </div> 
</body> 
</html>

CSS：

img { 
    position: absolute; 
    height: 100%; 
    left:  50%; 
    transform: translateX(-50%); 
} 

.img { 
    position: relative; 
    height: 100%; 
} 

.figure, .text { 
    width: 50%; 
    overflow: hidden; 
    float: left; 
} 

.article { 
    display: flex; 
    min-height: 280px; 
    max-width: 690px; 

    background: white; 
}

出典

2016-11-01 Ozrix

Imはサファリ9.1.3で問題を見ていません。

私はフレックスのためにウェブキットプレフィックスを使用します。あなたは単にディスプレイを置いているように見えます：flex;すべての上に私はあなたのラッパーのためのこのような何かをしようとするフレックスの値を割り当てます。あなたのイメージのスタイルまでは、あなたが得ようとしているものを正確に見ることができません。画像の高さを100％に設定することは、親が静的な高さを持つ場合にのみ機能するため、問題です。それは、それと隠されたオーバーフローの間にあるように、あなたはbackground-size：cover;のようなものを達成しようとしているかもしれません。 idはそれを調べます。

https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/

http://codepen.io/ErwanHesry/pen/JcvCw

.wrapper, .article { 
    display: -webkit-flex; 
    display: flex; 
} 

.figure, .text { 
    -webkit-flex:1; 
    flex:1; 
} 

.article { 
    min-height: 280px; 
    max-width: 690px; 
    background: white; 
}

出典

2016-11-01 21:22:29

、私は当初、複数の.article要素、フレックス使用して整列すべてがあるように望んでいたので、同様.wrapper要素にフレックスを設定しました。私は質問を更新します – Ozrix

完全.img要素を取り除くトリックをしました。これは、Safariがフレックスコンテナに対して直接の要素だけを伸ばしているかのようです（少なくとも、絶対的に配置された画像がある場合）。混乱のため申し訳ありません

See jsBin

出典

2016-11-01 21:26:11 Ozrix

フレックスボックスの問題Safari 10.0.1

答えて

関連する問題