Diisplay flex not stretching a div

Question

I used CSS property display: flex . My content div's are not equal.

right now it looks like:

I want to make it look like so:

HTML

 <div class="poplar-boxes">

    <div class="popular-boxes-devider"></div> 

 </div>

 <div class="poplar-boxes">

    <div class="popular-boxes-devider">

 </div>

CSS

.poplar-boxes {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: stretch;
}

.popular-boxes-devider {
    flex-basis: 30%
}

Here is a JS Fiddle

Answer 1

Your flex item are the same in height ( popular-boxes-devider ) . The problem is that you set the border to .info which are not equal in height.

The trick is to get them equal. You need to calculate their height depending on their margin top, padding and height of the round circle above them

See snippet below

 /* Added styles */ .effect2, .icon { height: 100%; } .info { height: calc(100% - 72px); box-sizing: border-box; } .popular-boxes-devider { margin-bottom: 15px; } /* end Added styles */ .poplar-boxes { min-height: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } .popular-boxes-devider { flex-basis: 30%; } .box > .icon { text-align: center; position: relative; background: #fff; } .box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 4px solid white; line-height: 88px; border-radius: 50%; background: #2c2c2c; vertical-align: middle; } .box > .icon:hover > .image { background: #6CB4C4; } .box > .icon > .image > i { font-size: 36px !important; color: #fff !important; } .box > .icon:hover > .image > i { color: white !important; } .box > .icon > .info { margin-top: -24px; background: rgba(44, 44, 44, 0.09); border: 1px solid #2c2c2c; padding: 15px 0 10px 0; } .box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; } .box > .icon > .info > h3.title { font-size: 21px; font-family: "Quicksand", sans-serif !important; font-size: 28px; color: #222; font-weight: 500; padding-top: 14px; } .box > .icon > .info > p { font-size: 15px; color: #666; line-height: 1.5em; margin: 20px 10px; text-align: justify; } .box > .icon > .info > .more a { font-family: "Quicksand", sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; } .box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; } /* .box .space { height: 2px; background-color: #2c2c2c;} */ .btn-default { font-family: "Quicksand", sans-serif; background-color: #75b1ae; color: #FFFFFF; } .btn-default:hover { background-color: #FFFFFF; color: black; } .box .image img { width: 58%; /* vertical-align: sub; */ } /*================================================== * Effect 2 * ===============================================*/ .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 13px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #777; transform: rotate(-3deg); } .effect2:after { transform: rotate(3deg); right: 10px; left: auto; } 

 <div class="poplar-boxes"> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/startup-registration.png" /></div> <div class="info"> <h3 class="title">Startup Registration</h3> <p> SetyourBiz is a leading business setup services provider in India with 4% market share in highly unorganized sector of small scale consultants. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/foreign-investment.png" /></div> <div class="info"> <h3 class="title">Foreign Investment (FDI)</h3> <p> Foreign investment is regulated by FEMA act, RBI circulars. Our expert advise and prompt services has what made us a renowned face in such sectors. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/licensing-and-registrations.png" /></div> <div class="info"> <h3 class="title">Licensing & Registrations</h3> <p> It is imperative and mandatory for a start up as well as established business to obtain required licenses in order to legally operate. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/intellectual-property-rights.png" /></div> <div class="info"> <h3 class="title">Intellectual Property Rights</h3> <p> Every business, invention, original creative work and design needs to be legally protected to claim the owner's right and safeguard it from infringement </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/accounting-and-tax.png" /></div> <div class="info"> <h3 class="title">Accounting & tax</h3> <p> Accounting and taxes may be complex for you but it is simple for our expert team of CAs. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/secretarial-services.png" /></div> <div class="info"> <h3 class="title">Secretarial Services</h3> <p> Corporate and economic laws may be cumbursome but not for our team of CS, experience excellence here. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/hr-and-legal.png" /></div> <div class="info"> <h3 class="title">Legal Services</h3> <p> Reply to notices like IP Violation Notice, cheque bounce notice, NRI, Immigration Services and Drafting of Legal Documents, Agreements like vendor engagement agreement, confidentiality. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/hr-and-legal.png" /></div> <div class="info"> <h3 class="title">Labour Laws & Payroll</h3> <p> Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees. </p> </div> </div> <div class="space"></div> </div> </div> <div class="popular-boxes-devider"> <div class="effect2 box"> <div class="icon"> <div class="image"><img src="images/icon/funding-and-restructuring.png" /></div> <div class="info"> <h3 class="title">Funding & Restructuring</h3> <p> Registration with Labour Department, Creation of PF / ESIC accounts and payment of dues for employees and monthly compliance of TDS are necessary compliance, rest assured with a fee of Rs. 250 per employees. </p> </div> </div> <div class="space"></div> </div> </div> </div> 

Answer 2

@Inderjeet just put

.box > .icon > .info {
    height: 25em;
}

or some value that fit you and fix the inside p accordingly