CSS Flex 项目超出其容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38723559/
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
Flex item exceeds its container
提问by Romeno
I have a flex container with a defined width. Container has flex-direction: rowand 2 columns. One is fixed width, it is inflexible. The other is flexible and should fit all container's remaining space.
我有一个定义了width. 容器有flex-direction: row和 2 列。一种是固定宽度，它是不灵活的。另一个是灵活的，应该适合所有容器的剩余空间。
When flexible column content is long enoughit overflows the container, exceeds its width.
当灵活的列内容足够长时，它会溢出容器，超过其宽度。
Whyis that happening? And how should I fix it right way?
为什么会这样？我应该如何以正确的方式修复它？
Note: I already solved it by using flex: 1 0 0 instead of 1 0 auto and it would be just fine. But I just don't understand why it stops exceeding the parentand why it starts wrapping the content? Is it even the rightway to do it?
注意：我已经通过使用 flex: 1 0 0 而不是 1 0 auto 解决了它，它会很好。但我只是不明白为什么它停止超过父级以及为什么它开始包装内容？它甚至是正确的方法吗？
HTML:
HTML：
<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
CSS:
CSS：
.flex-container {
display: flex;
flex-direction: row;
width: 500px;
background-color: green;
}
.flex-item {
display: block;
margin: 20px 0;
}
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
The JSFiddle
采纳答案by Naga Sai A
To achieve expected result, specify the width for the .flexible class as well
为了达到预期的结果，还要指定 .flexible 类的宽度
.flexible {
flex: 1 0 auto;
width:200px;
background-color: blue;
word-wrap:break-word;
}
回答by Nenad Vracar
With flex: 1 0 autoin .flexibleyou set the following
随着flex: 1 0 auto在.flexible你设置以下
1isflex-growand its set to grow0isflex-shrinkso you set that to don't shrinkautoisflex-basiswhich in this case refers towidthwhich is determined by the flex item's contents.
1是flex-grow并且它会成长0为flex-shrink使您设置，为不缩水autoisflex-basiswhich 在这种情况下指的是width哪个由弹性项目的内容决定。
Also you can't use display: blockin flex-container it doesn't work. Default value of flex-direction is row so you can remove that. You can set fixed width of .inflexiblelike this flex: 0 0 100px;. And for .flexibleyou can just use flex: 1and it will take rest of free width.
你也不能display: block在 flex-container 中使用它不起作用。flex-direction 的默认值是 row，所以你可以删除它。您可以.inflexible像这样设置固定宽度flex: 0 0 100px;。因为.flexible你可以使用flex: 1它，它会占用剩余的自由宽度。
.flex-container {
display: flex;
width: 500px;
background-color: green;
}
.flex-item {
margin: 20px 0;
}
.inflexible {
flex: 0 0 100px;
background-color: red;
}
.flexible {
flex: 1;
background-color: blue;
}<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
</div>
</div>回答by Simon H?nisch
In http://www.w3schools.com/cssref/css3_pr_flex-basis.aspit says the following about flex-basis: auto:
在http://www.w3schools.com/cssref/css3_pr_flex-basis.asp 中，它说明了以下内容flex-basis: auto：
The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content
长度等于柔性项目的长度。如果 item 没有指定长度，长度将根据其内容
flex-basisis the third property set by the flexproperty shorthand.
flex-basis是flex属性速记设置的第三个属性。
So if you set it to auto, the .flexiblediv's maximum width (depending on its content) will be the width of the display: flexcontainer.
因此，如果将其设置为auto，则.flexiblediv 的最大宽度（取决于其内容）将是display: flex容器的宽度。
回答by MassDebates
I think you're misunderstanding one or two of the flexvalues here, if I understand you correctly. Consider the following codepen:
flex如果我理解正确的话，我认为您误解了这里的一两个值。考虑以下代码笔：
http://codepen.io/anon/pen/NALvPw
http://codepen.io/anon/pen/NALvPw
Check this out:
看一下这个：
.your-flex-item { /*(child, not container)*/
flex: <flex-grow> <flex-shrink> <flex-basis>;
}
Yours was:
你的是：
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
If you prefer doing it this way, I suggest changing the autovalue to your desired width, so more like this:
如果您更喜欢这样做，我建议将auto值更改为您想要的宽度，更像这样：
.inflexible {
flex: 0 0 100px; /*auto changed to 100px*/
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
background-color: blue;
}
回答by Pugazh
Update flex: 1 0 auto;to just flex: 1in .flexible. And remove flex: flex: 0 0 auto;from .inflexible.
更新flex: 1 0 auto;只是flex: 1在.flexible。并删除 flex:flex: 0 0 auto;从.inflexible。
To understand more about flexbox check https://css-tricks.com/snippets/css/a-guide-to-flexbox/
要了解有关 flexbox 的更多信息，请查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.flex-container {
display: flex;
flex-direction: row;
width: 500px;
background-color: green;
}
.flex-item {
display: block;
margin: 20px 0;
}
.inflexible {
flex: 0 0 auto;
width: 100px;
background-color: red;
}
.flexible {
flex: 1 0 auto;
background-color: blue;
}
.solution .flexible {
flex: 1 0 0;
}
.question {
margin-bottom: 20px;
}<div class="question">
<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
</div>
</div>
</div>
<div class="solution">
<div class="flex-container">
<div class="flex-item inflexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
</div>
<div class="flex-item flexible">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
</div>
</div>
</div>