CODEWITHSUNDEEP
cssflexbox
Kristina Bressler
Kristina Bressler

Reputation: 1732

Trying to make flex items equal height but flex-grow isn't working

I'm trying to make the blue boxes equal height no matter how many content it has. Therefore, I'm trying to use flex-grow for the blue boxes.

Please check out this code. I tried to use the shortcode, flex: 1 like other questions suggested but it didn't work. How do I make the blue boxes equal heights?

HTML

<div class="practicespanel">
<div class="container">
<div class="practicecontent">
<h1>DUI Defense Attorney Douglas Herring</h1>
<p>Our very specialized firm dedicates itself to New Jersey DUI Defense. The Law Office of Douglas Herring is the New Jersey DUI Help Center.
DWI arrest is very serious in New Jersey. You are facing mandatory license suspensions, high monetary costs, increased penalties for years, and other extreme impacts on your life.  You need an experienced and successful DWI defense attorney. Let us take away your uncertainty and give you the defense you deserve. </p>
</div>
<div class="practiceicons">
<div class="practicerow">
<div class="column3">
<div class="hammericon practiceicon"></div>
<div class="criminalcontent">
<h3>First Offense DUI</h3>
<p>Your First Offense DUI can carry heavy penalties. Fees, classes, and possible jail time await first time offenders without a proper defense. </p>
<div><a href="/first-offense-dui/">- Read More -</a></div>
</div>
</div>
<div class="column3">
<div class="balenceicon practiceicon"></div>
<div class="criminalcontent">
<h3>Second Offense DUI</h3>
<p>Second Offense DUI holds serious penalties including mandatory jail time and ignition interlock. Your freedom depends on your defense.</p>
<div><a href="/second-offense-dui/">- Read More -</a></div>
</div>
</div>
<div class="column3">
<div class="documenticon practiceicon"></div>
<div class="criminalcontent">
<h3>Third Offense DUI</h3>
<p>Third Offense DUI means 180 days in jail, community service, Over $6000 in fees and incredible stress. Without a proper defense this offense could change your life forever.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
<div class="practicerow">
<div class="columns2">
<div class="columnright">
<div class="handicon practiceicon"></div>
<div class="criminalcontent">
<h3>Defense Report</h3>
<p>Find out what people are saying about our firm, see our testimonials and results. See what the DUI Help Center has done and how it can help you.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
<div class="columns2">
<div class="columnleft">
<div class="caricon practiceicon"></div>
<div class="criminalcontent">
<h3>DUI Defense Blog</h3>
<p>Your source for up to date DUI Defense News, Law Updates, and DUI Help Center Announcements.</p>
<div><a href="#">- read more -</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS

.practicespanel {
  position: relative;
  display: block;
  width: 100%;
}
.container { 
  width: 90%;
  margin: 0 auto;
}
.practicecontent {
  width: 100%;
  text-align: center;
}
.practiceicons {
  width: 100%;
  display: block;
  position: relative;
}
.practicerow {
  width: 100%;
  display: flex;
  position: relative;
}
.column3 {
  display: flex;
  width: 33.3%;
  width: calc(100% / 3);
  text-align: center;
  position: relative;
  padding: 0 50px;
}
.columns2 {
  display: inline-block;
  width: 50%;
  padding: 0 50px;
  text-align: center;
}
.criminalcontent {
display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 100%;
}
.criminalcontent p {
  background-color: blue;
  color: #fff;
  display: block;
  width: 100%;
  position: relative;
  /*min-height: 70px;*/
  flex-grow: 1;
}

.columnright {
  float: right;
  width: 300px;
  position: relative;
  display: flex;
  padding: 0 40px 0 0;
  box-sizing: border-box;
}
.columnright:after {
  content: "";
  clear: both;
}
.columnleft {
  width: 300px;
  position: relative;
  display: flex;
  padding: 0 0 0 40px;
  box-sizing: border-box;
}

Upvotes: 1

Views: 275

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371699

In your code, the blue boxes in the first row do have equal height, regardless of the content size. Try adding content to any of the first row boxes: http://jsfiddle.net/hLr0ecye/

In the second row, you need to make one adjustment:

In .columns2, instead of display: inline-block use display: flex.

.columns2 {
    /* display: inline-block; */
    display: flex; /* NEW */
    justify-content: center; /* NEW; optional center alignment; just for demo */
    width: 50%;
    padding: 0 50px;    
    text-align: center;
}

DEMO: http://jsfiddle.net/hLr0ecye/1/
YOUR PEN: http://codepen.io/anon/pen/WQZbqJ

NOTE: The first row and second row have different flex containers. So the blue boxes in the first row share equal height, and the blue boxes in the second row share equal height. But the boxes in both rows DO NOT share equal height, because they're not siblings in the same flex container. If you want them all to share equal height you should put them in one flex container. Consider applying display: flex to the parent element for both: .practiceicons.

Upvotes: 1

Related Questions