Div's Content Autoscaling with another Div Content

Question

I would like to avoid this CSS Autoscaling bug that leaves huge blanks for long movie names. Would someone help me how to solve it? Here is my DIV and CSS code.

HTML:

<div class="col-md-2 w3l-movie-gride-agile">
                                <a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
                                    <div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
                                </a>
                                <div class="mid-1 agileits_w3layouts_mid_1_home">
                                    <div class="w3l-movie-text">
                                        <h6><a href="single.html">Maléfica: La dueña de Mal</a></h6>                            
                                    </div>
                                    <div class="mid-2 agile_mid_2_home">
                                        <p>2019</p>
                                        <div class="block-stars">
                                            <ul class="w3l-ratings">
                                                <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i>7.4</a></li>
                                                
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div class="ribben">
                                    <p>NEW</p>
                                </div>
                            </div>

CSS:

.w3l-movie-gride-agile {
    text-align: center;
    box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
    margin-right: 0%;
    margin-bottom: 3%;
    position: relative;
    padding-left: 0;
}
.col-md-2 {
    width: 16.66666667%;
}

Answer 1

你可以使用 flexbox 来解决这个问题

.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}