flexboxで画面幅を縮小した時について

Question

<article id="blog">
          <h2>Blog</h2>
          <p>ブログ</p>
          <div class="blog_contents">
            <article>
              <img src="images/blog1.png" alt="blog1">
              <time datetime="2019-12-3"><p>2019/12/3</p></time>
              <p>１月の営業日のご案内</p>
            </article>
            <article>
              <img src="images/blog2.png" alt="blog2">
              <time datetime="2019-11-2"><p>2019/11/2</p></time>
              <p>１２月の営業日のご案内</p>
            </article>
            <article>
              <img src="images/blog3.png" alt="blog3">
              <time datetime="2019-11-2"><p>2019/11/2</p></time>
              <p>メイク始めました</p>
            </article>
            <article>
              <img src="images/blog3.png" alt="blog4">
              <time datetime="2019-11-2"><p>2019/11/2</p></time>
              <p>メイク始めました</p>
            </article>
          </div>
        </article>

#blog {
    .blog_contents {
      display: flex;
      flex-wrap: wrap;
      article {
        width: 50%;
      }
    }
  }

Flexboxで画面幅を縮小した時にそれぞれの要素が重ならずに縮小するようなデザインをしたいのですがどうして上記のようなコードではいけないんでしょうか？
上記のようなコードにすると要素が重なってしまい困っております。

Comments

[kyoya0819]

HTMLをご提示ください。

[silk_]

完了しました！

[yoshinavi]

「CSS」を提示してください。

Answer 1

.blog_contents img {
    width: 100%;
}