我有一个简单的问题。我有一个基本的 flex 盒布局。一列占据布局的 2/3，另一列占据三分之一。它们都有一个紫色半透明标题 (.85)，其内容位于不透明的黑框中。
http://codepen.io/StuffieStephie/pen/XdoBqL
body {
background: url('http://www.amazingwallpaperz.com/wp-content/uploads/Black-and-Purple-Abstract-Cool-Backgrounds-Wallpaper.jpg') center center;
background-size: cover;
font-family: 'Open Sans';
}
#featuredSlide, #featuredSlide img {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.container {
display: -webkit-flex;
display: flex;
justify-content: space-between;
color: #fff;
}
.sect {
box-sizing: border-box;
width: 32%;
-webkit-flex: 1;
flex: 1;
margin: 30px; text-align: center;
}
.sect + .sect {
margin-left: 10px;
}
.sect.feat {width: 65%;
-webkit-flex: 2;
flex: 2;
}
.sect .cont {
background:#414141;
padding-top: 40px;
padding-bottom: 30px;
border-radius: 0 0 5px 5px;
}
.sect h2 {
background:#414141;
background-color: rgba(52,41,109,.85);
margin-bottom: 0;
text-align: center;
text-transform: uppercase;
font-size: 2em;
font-weight: 300;
padding: 30px 10px;
border-radius: 5px 5px 0 0;
}<head><link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="sect feat">
<h2> Featured Guests & Programming</h2>
<div class="cont">
<!-- SLIDE SHOW -->
<div id="featuredSlide" class="owl-carousel">
<img src="http://placehold.it/800x300/5d64a8">
</div> <!-- CLOSING SLIDE SHOW DIV TAG --></div>
</div>
<div class="sect">
<h2> News </h2>
<div class="cont">Some thrilling article</div>
</div>
</div>
<div class="clearfix"></div>
</body>两个 .sect 元素的高度相同。我希望两个 .sect .cont 元素具有相同的高度。我知道我可以通过将 background-color 设置为 .sect 来使它们看起来相同的高度，但这会破坏我的标题的透明度。
有什么想法吗？
最佳答案
您可以添加flex-direction: column;给您.sect类，并给你的 .cont A类flex-grow: 1 。这将使.cont div 占据 .sect 的剩余高度类。
.sect {
display: flex;
flex-direction: column;
}
.cont {
flex-grow: 1;
}
关于CSS Flexbox - 当一列包含多个部分时高度相同吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37057160/