flex:wrapがきかない

Question

flex:wrapをつかって要素を横に並べたいです。

<div class="work-wrap">
  <div class="work-contents">
          <img src="image/sixbrain_hero-1.jpg" alt="">
          <p>あいうえお</p>
   </div>
   <img src="image/moii_brand_top.jpg" alt="">
  </div>
   

htmlは上記の通りです。
この場合の、下記のcssがききません

.work-wrap {
width:1060px;
display: flex;
 flex-wrap: wrap;
}

.work-contents{
  width:50%;
}

ちなみですが、下記のようだとうまくいきました。
最初のcssではなぜうまくいかないんでしょうか？

<div class="work-wrap">
  <img src="image/sixbrain_hero-1.jpg" alt="">
   <img src="image/moii_brand_top.jpg" alt="">
  </div>

.work-wrap {
  width:1060px;
  display: flex;
  flex-wrap: wrap;
 
}
.work-wrap img{
  width:50%;
}

Answer 1

flex-wrapは要素を折り返して表示したいときに使います。（子要素の横幅が親要素の横幅を超えたら折り返します。）
単純に横に並べたいのであれば.work-wrapにdisplay:flex;だけで良いかと思います。

.work-wrap{
    display: flex;
}

.work-contents{
    width: 20%;
}

.work-wrap img{
    width: 80%;
}

もし縦に並べるということでしたら
子要素のwidthを100%にしてあげればOKです。

.work-wrap{
    display: flex;
    flex-wrap: wrap;
}

.work-contents{
    width: 100%;
}

.work-wrap img{
    width: 100%;
}

縦に並べるだけでしたら下記のようなものもありです。

.work-wrap{
    flex-direction: column;
}

kmome様が後に書いて下さっているコードで横並びに表示されたのは
imgタグ両方にwidth50%が適用されているからです。
もしこれがwidth:60%であれば、widthの合計が100%を超えるので
2つ目のimgタグは下に落ちることになります。