Html 防止弹性项目高度扩展以匹配其他弹性项目

我在一个容器中有两个元素，它们通过使用flex-box并排放置。在第二个元素（

.flexbox-2

）上，我在CSS中设置它的高度。但是，第一个元素（

.flexbox-1

）将与

.flexbox-2

的高度匹配。如何阻止

.flexbox-1

与

.flexbox-2

的高度匹配，而只保留其自然高度

这是我到目前为止所拥有的（也可用）

.container{
显示：-webkit flex；
-webkit柔性方向：行；
}
.flexbox-1{
-webkit-flex:1；
边框：实心3px红色；
}
.flexbox-2{
-webkit-flex:2；
边框：纯色3px蓝色；
高度：200px；
左边距：10px；
}

.flexbox-1
.flexbox-2

这是一个旧的解决方案。 我的答案被这个取代了。这是一个更好的解决方案，不依赖CSS的怪癖

只要flex容器本身没有高度，您就可以在第一个flex项上设置高度：0%。因为它没有从其父级继承的高度，所以任何百分比的高度都会导致它塌陷。然后，它将随着内容物的增长而增长

例子 在本例中，我删除了

-webkit

前缀。并且前缀可以添加到非前缀版本的上方。我还删除了

flex-direction:row

，因为它是默认值

.container{
显示器：flex；
}
.flexbox-1{
弹性：1；
身高：0%；
边框：实心3px红色；
}
.flexbox-2{
弹性：2；
边框：纯色3px蓝色；
高度：200px；
左边距：10px；
}

.flexbox-1
.flexbox-2

我知道这是一个老问题，但更好的解决方案是使用

flex start

将flex项设置为与顶部对齐

/*默认样式*/
.集装箱{
显示器：flex；
}
.flexbox-2{
弹性：2；
边框：纯色3px蓝色；
高度：200px；
左边距：10px；
}
.flexbox-1{
弹性：1；
自我校准：灵活启动；
边框：实心3px红色；
}

“自动对齐：灵活启动；”
.flexbox-2

将孩子的

高度设置为
最大内容量将防止他们收缩


.container{
显示：-webkit flex；
-webkit柔性方向：行；
}
.flexbox-1{
-webkit-flex:1；
边框：实心3px红色；
高度：最大含量；
}
.flexbox-2{
-webkit-flex:2；
边框：纯色3px蓝色；
高度：200px；
左边距：10px；
}

.flexbox-1
.flexbox-2
您可以通过添加到父项align items:flex start

这些都是相关的：谢谢@MrGood被接受的答案已经超过3年了，当时是达到预期结果的一个好方法。精彩的答案！注意：您也可以在父元素上执行“对齐项目：弹性开始”以防止所有子元素增长，这在我的情况下是必需的。
align项目：中心、基线、弹性开始、弹性结束
也在工作，这是必需的，因为
align项目
的默认值是
stretch
。欢迎使用堆栈溢出。在用现有答案为五年前的问题添加答案时，重要的是要解释你正在解决的问题的新方面、你的答案是如何工作的以及为什么应该使用它。正确的代码格式也很有帮助，因为现在你的句子中只有粗体文本，而没有提供添加css规则的上下文。