Active storageで、複数画像投稿をしようとするとオーバーフローしてしまう

Ruby on Railsで、画像投稿機能を実装しようとしているのですが、そこで一枚だけの投稿だったら大丈夫なのですが、複数枚投稿するとレイアウトが崩れてしまいます。
原因はおそらく複数枚投稿した画像が大きすぎて枠に収まらないからだと推測していますが、どうしたらいいのかわからないです。

原因の画像

崩れてしまう投稿一覧ページ

HTML
1<div class="content-wrapper">
2    <div class="content-block">
3        <% @posts.each do |post| %>
4        <div class="content">
5         <div class="user-about">
6             <div class="image">
7                <%= image_tag 'user.JPG'%>
8             </div>
9         
10         <div class="profile">
11            <div class="name-history">
12                <div class="name">
13                    taka
14                </div>
15                <div class="mania-histry">
16                    マニア歴：1年
17                </div>
18             </div>
19             
20             <div class="enjoy-point">
21                 楽しいポイント: 自分の手で作ったものが動く様子が楽しい
22             </div>
23         </div>
24       </div>
25       
26       <div class="text">
27        <p><%= post.content %></p>
28    </div>
29   
30    <% if post.images.attached? %>
31    <div class = 'images'>
32    <% post.images.each do |image| %>
33    <%= image_tag image %>
34    </div>
35    <% end %>
36    <% end %>
37
38         <div class="action-menu">
39             <div class="like">
40
41             </div>
42             <div class="comment">
43                 
44             </div>
45         </div>
46
47        </div>
48        <% end %>
49
50    </div>
51    <div class="sidebar">
52     <div class="box">
53
54     </div>
55     <div class="box">
56         
57    </div>
58    </div>
59</div>

CSS
1// Place all the styles related to the home controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: http://sass-lang.com/
4
5#home-top {
6  .content-wrapper{
7      display: flex;
8      justify-content: space-between;
9    .content-block{
10        border: 2px solid #000;
11        padding: 20px;
12        width: 60%;
13
14       .content{
15        border: 2px solid #000;
16        padding: 15px;
17        margin-bottom: 10px;
18         .user-about{
19          display: flex;
20
21          .image{ 
22             width: 10%; 
23        }
24        
25        .profile{
26          margin-left: 10px;
27          
28          .name-history{
29            margin-bottom: 3px;
30              display: flex;
31              width: 100%;
32              .name{ 
33                font-weight: bold;
34               }
35             
36                .mania-histry{
37                 margin-left: 20px;            
38                }
39             }
40     
41          .enjoy-point{
42              width: 100%;
43              font-size: 13px;
44          }
45        }
46         
47        }     
48    }
49    }
50      .sidebar{
51       width: 20%;
52       border: 2px solid #000;
53       padding: 20px;
54    }
55    .box{
56        width: 100px;
57        height: 100px;
58        background-color: #000;
59        margin: 10px auto;
60    }
61}
62}
63

アプリケーションのCSS

body{
  word-wrap: break-word;
  max-width: 1080px;
  margin: 0 auto;
}

 img {
   max-width: 100%;
 }

#header{
  display: flex;
  align-items: right;
  justify-content: space-between;
}

#header #nav{
    list-style: none;
    display: flex;
 } 
 
#header #nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
}
 
#header #nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 20px;
}

#footer{
  background-color: #333;
  text-align: center;
  color: white;
  padding: 10px 0;
  font-size: 13px;
  margin-top: 20px;
}

#footer p{
  margin: 0;
}

.toast{
  margin: 10px 0;
  text-align: center;
}

.toast .notice{
background-color: #49ac49;
color: white;
padding: 10px;
}

.toast .aleat{
  background-color: red;
  color: white;
  padding: 10px;
}