Html 防止弹性项目高度扩展以匹配其他弹性项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27575779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent a flex items height from expanding to match other flex items
提问by Tom Oakley
I have two elements inside a container, which are being side-by-side by using flex box. On the second element (.flexbox-2), I am setting it's height in the CSS. However, then the first element (.flexbox-1) will match the height of .flexbox-2. How would I stop .flexbox-1from matching the height of .flexbox-2, and instead just retain its natural height?
我在一个容器中有两个元素，它们通过使用 flex box 并排。在第二个元素 ( .flexbox-2) 上，我在 CSS 中设置它的高度。但是，第一个元素 ( .flexbox-1) 将匹配 的高度.flexbox-2。我将如何停止.flexbox-1匹配 的高度.flexbox-2，而只保留其自然高度？
Here is what I have so far (also available as a jsFiddle)
这是我到目前为止所拥有的（也可用作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>采纳答案by misterManSam
This is an old solution.My answer is superseded by this new answer by Aaron using
align-self. That is a better solution that does not rely on a CSS quirk.
这是一个旧的解决方案。我的答案被Aaron 使用
align-self. 这是一个更好的解决方案，不依赖于 CSS 怪癖。
As long as the flex container has no height itself, you can set height: 0%on the first flex item. Because it has no height to inherit from its parent, any percentageheight will cause it to collapse. It will then grow with its contents.
只要弹性容器本身没有高度，您就可以height: 0%在第一个弹性项目上进行设置。因为它没有从父级继承的高度，任何百分比的高度都会导致它折叠。然后它会随着它的内容而增长。
Example
例子
In this example I have removed the -webkitprefix. It's only really required for Safariand the prefix can be added abovethe non-prefixed version. I also removed flex-direction: rowas it is the default value.
在这个例子中，我删除了-webkit前缀。只有 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>回答by Aaron
I know this is an old question but a better solution is to set the flex item to align to the top using flex-start.
我知道这是一个老问题，但更好的解决方案是使用flex-start.
/* Default Styles */
.container {
display: flex;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
.flexbox-1 {
flex: 1;
align-self: flex-start;
border: solid 3px red;
}<div class="container">
<div class="flexbox-1">"align-self: flex-start;"</div>
<div class="flexbox-2">.flexbox-2</div>
</div>回答by Erik Martín Jordán
Setting the heightof the children to max-contentwill prevent them to shrink.
将height孩子的设置为max-content将防止他们缩小。
.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
height: max-content;
}
.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>回答by Sergiu Cebotaru
You can easily fix that by adding to the parent align-items: flex-start;
您可以通过添加到父align-items: flex-start;来轻松解决这个问题。
That's all
就这样
