Flexbox子要素がはみ出る現象を解決したい。

##困っていること
現在Pinterest風のレイアウトを作成したのですが、一部の画像が枠からはみ出ってしまいます。

##index.html

<div id="wrapper">
  <div class="main">
    <article>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/debby-hudson-MzSqFPLo8CE-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist hudson</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/martino-pietropoli-VSo5d9wlT7s-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist pietropoli</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist delberghe</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/robert-keane-rlbG0p_nQOU-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist keane</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/henrik-donnestad-t2Sai-AqIpI-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist donnestad</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/milan-popovic-DLu6KTDzuPw-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist popovic</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/anna-kolosyuk-D5nh6mCW52c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kolosyuk</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/alexander-schimmeck-ineC_oi7NHs-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist schimmeck</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/meric-dagli-3KJpF86nR4c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist dagli</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/markus-spiske-k0rVudBoB4c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist spiske</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/debby-hudson-MzSqFPLo8CE-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist hudson</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/martino-pietropoli-VSo5d9wlT7s-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist pietropoli</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist delberghe</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/robert-keane-rlbG0p_nQOU-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist keane</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/henrik-donnestad-t2Sai-AqIpI-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist donnestad</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/milan-popovic-DLu6KTDzuPw-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist popovic</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/anna-kolosyuk-D5nh6mCW52c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kolosyuk</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/alexander-schimmeck-ineC_oi7NHs-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist schimmeck</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/meric-dagli-3KJpF86nR4c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist dagli</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/markus-spiske-k0rVudBoB4c-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist spiske</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
      <section>
        <figure>
          <a href="#">
            <img src="https://tatsuya-lab.com/wp-content/uploads/2020/02/vlad-kutepov-XU0YcfPXKI4-unsplash.jpg" alt="">
          </a>
        </figure>
        <h1>Artist kutepov</h1>
      </section>
    </article>
  </div>
</div>

##index.scss

#wrapper {
  .main {
    article {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      max-width: 1500px;
      margin: 0 auto;
    }

    section {
      margin: 20px 20px 0 20px;

      &:last-of-type {
        margin-bottom: 20px;

        h1 {
          font-size: 14px;
          padding-top: 5px;
        }
      }
      figure {
        border-radius: 10px;
        background-color: lightgray;
        line-height: 0;

        img {
          border-radius: 10px;
          width: 100%;
          height: auto;
          

          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  article {
    height: 2600px;
  }
  section {
    width: 28%;
  }


@media screen and (min-width: 990px) {
  .article {
    max-width: 1200px;
    margin: 0 auto;
    height: 2000px;
  }
  section {
    width: 21.5%;
  }
}

hatena19

2021/02/26 13:39

現状のSCSSはエラーがでてコンパイルできません。コンパイルできるSCSSを提示するか、コンパイル後のCSSを提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

Pinterest風のレイアウト、つまり段組みレイアウトにするなら、columns を使うとシンプルに実現できます。

段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN

css
1* {
2  margin: 0;
3}
4#wrapper .main article {
5  columns: 250px;
6  column-gap: 0;
7  max-width: 1500px;
8  margin: 0 auto;
9  padding: 0 10px;
10}
11#wrapper .main section {
12  break-inside: avoid;
13  padding: 10px;
14}
15#wrapper .main section h1 {
16  font-size: 14px;
17  padding-top: 5px;
18}
19#wrapper .main section figure {
20  line-height: 0;
21}
22#wrapper .main section figure img {
23  border-radius: 10px;
24  width: 100%;
25  height: auto;
26}
27#wrapper .main section figure img:hover {
28  opacity: 0.7;
29}