css - 试图使 flex 元素等高但 flex-grow 不起作用

Question

无论有多少内容，我都试图使蓝色框等高。因此，我正在尝试对蓝色框使用 flex-grow。

请查看此 code .我尝试像建议的其他问题一样使用短代码 flex: 1 但它没有用。如何使蓝色框等高？

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;
}

Answer 1

在您的代码中，无论内容大小如何，第一行中的蓝色框确实具有相同的高度。尝试将内容添加到任何第一行框中:http://jsfiddle.net/hLr0ecye/

在第二行，你需要做一个调整:

在 .columns2 中，使用 display: flex 而不是 display: inline-block。

.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;
}

演示:http://jsfiddle.net/hLr0ecye/1/
你的笔:http://codepen.io/anon/pen/WQZbqJ

注意:第一行和第二行有不同的 flex 容器。所以第一行中的蓝色框共享相同的高度，第二行中的蓝色框共享相同的高度。但是两行中的盒子不具有相同的高度，因为它们不是同一个 flex 容器中的 sibling 。如果您希望它们都具有相同的高度，您应该将它们放在一个 flex 容器中。考虑将 display: flex 应用到父元素:.practiceicons。