Yardım Container Div Yükseklik Verince Flex Oln Divler Arası Boşluk Artması

[Gece baykuşu]

Merhabalar Ana div olan container dib yüksekli verince flex özelliği olan divler arasında alt boşluk artıyor. Bunun oluşmasını nasıl engellerim.

 <div class="doctor-container">
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">/div>
 <div class="doctor-branch"></div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name"></div>
 <div class="doctor-branch"></div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 </div>

.doctor-container
{
 width: 1300px;
 display: flex;
 flex-wrap: wrap;
 position: relative;
 top: 20px;
 left: 20px;
 background-color: antiquewhite;
 height: 400px;
}
.doctor-box
{
 width: 466px;
 max-width: 266px;
 max-height: 300px;
 background-image: linear-gradient( 178deg, rgba(0, 142, 196, 0) 0%, rgba(0, 103, 144, 0.89) 64%, #005A7D 100%);
 position: relative;
 left: 15px;
 top: 15px;
 margin: 27px;
 border-radius: .8rem;
 height: 320px;
}

.doctor-img
{
 max-width: 270px;
 height: 180px;
 background-color: rgba(0, 144, 201, 0.1);
 border-radius: 0.8rem;
}
.doctor-imgfor
{
 max-width: 100%;
 transform: translate(21%, 17%);
}
.doctor-Info
{
 max-width: 100%;
 height: 100px;
 color: #fff;
}
.doctor-name
{
 width: 100%;
 height: 55px;
 position: relative;
 top: 10px;

 line-height: 50px;
 text-align: center;
}
.doctor-branch
{
 width: 100%;
 height: 50px;
 position: relative;
 line-height: 50px;
 text-align: center;
}

 

[Senior_53]

Margin veya padding bottom ı sıfır ver.

Dediğini de yam anlamadım ss atsana bi.

 

[Gece baykuşu]

Margin veya padding bottom ı sıfır ver.

Dediğini de yam anlamadım ss atsana bi.

Contanier div yükseklik arttıkça display flex olan divler arasındaki boşluk artıyordu. Align-items:flex-start yapınca düzeldi.