html – 防止弹性项目高度展开以匹配其他弹性项目

前端之家收集整理的这篇文章主要介绍了html – 防止弹性项目高度展开以匹配其他弹性项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在容器中有两个元素,它们通过使用弹性框并排。在第二个元素(.flexBox-2)上,我设置它在CSS中的高度。但是,第一个元素(.flexBox-1)将匹配.flexBox-2的高度。我如何停止.flexBox-1匹配.flexBox-2的高度,而只是保持其自然高度?

这是我到目前为止(也可用as a jsFiddle)

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexBox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexBox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
<div class="container">
  <div class="flexBox-1">.flexBox-1</div>
  <div class="flexBox-2">.flexBox-2</div>
</div>
@H_301_9@解决方法

This is an old solution.
My answer is superseded by this 07000. That is a better solution that does not rely on a CSS quirk.

只要flex容器本身没有高度,可以在第一个flex项目上设置height:0%。因为它没有高度从其父进程继承,所以任何百分比高度都会使其崩溃。然后会随着它的内容而增长。

在这个例子中,我删除了-webkit前缀。 It’s only really required for Safari,前缀可以添加在非前缀版本之上。我也删除了flex-direction:row,因为它是默认值。

.container {
  display: flex;
}
.flexBox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexBox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
<div class="container">
  <div class="flexBox-1">.flexBox-1</div>
  <div class="flexBox-2">.flexBox-2</div>
</div>

猜你在找的HTML相关文章