试图使 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 00 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 容器中的兄弟姐妹。如果您希望它们都具有相同的高度，您应该将它们放在一个弹性容器中。考虑将 display: flex 应用于两者的父元素：.practiceicons.

试图使 flex 项目等高但 flex-grow 不起作用

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

css

flexbox