CSS 弹性盒 | 弹性项目被推出包含 div（屏幕外）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29638449/
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
flexbox | flex item being pushed out of containing div (off screen)
提问by iteles
I'm using the flexbox layoutto style a list of past tasks. The task description and the time are always going to be of very variable lengths.
我正在使用flexbox 布局来设计过去任务列表的样式。任务描述和时间的长度总是变化很大。
Everything looks great until a task description is entered which is long enough to wrap onto a second line and then the 'time' item (on the far right of the screen) is pushed slightly to the right - off the screen - hiding some of the content.
一切看起来都很好，直到输入了足够长的任务描述以换行到第二行，然后将“时间”项（在屏幕的最右侧）稍微向右推 - 离开屏幕 - 隐藏一些内容。
You can see the short description displays perfectly below, but the long one pushes what should be '00:08' off the screen AND the task description moves to the left as well!!
您可以看到简短的描述完美地显示在下面，但长的描述将应该是“00:08”的内容从屏幕上推开，并且任务描述也向左移动！
Here's a fiddlefor the code(which is below as per Stackoverflow's rules). If you resize the pane containing the resultthe '00:08' doesn't fall off the page but it does clearly move too far to the right.
这是代码的小提琴（根据 Stackoverflow 的规则在下面）。如果您调整包含结果的窗格的大小，“00:08”不会从页面上掉下来，但它确实向右移动了太多。
The above screenshot is in Chrome or Safari (the two browsers I was using) when shrinking the width of the window until the description wraps onto a second line.
上面的截图是在 Chrome 或 Safari（我使用的两个浏览器）中缩小窗口宽度直到描述换行到第二行。
I would like everything to display as per the first (short description) line if possible!And also to understand why this is behaving as it currently is.
如果可能，我希望所有内容都按照第一行（简短描述）显示！还要了解为什么会出现这种情况。
P.S. I have tried using floats and also using a table display layout but both of these techniques caused quite a few bugs, mostly because of the variable length content (so please don't suggest these as alternatives :)).
PS 我曾尝试使用浮点数和表格显示布局，但这两种技术都造成了很多错误，主要是因为内容长度可变（所以请不要建议将它们作为替代方案 :)）。
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
} <ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>采纳答案by Adam
Really, you only want the text content to have a flexible width (the time and the icon should have a fixed width and not shrink). This could be pretty easily accomplished with tables, absolute positioning, or flexbox.
实际上，您只希望文本内容具有灵活的宽度（时间和图标应该具有固定的宽度而不是缩小）。这可以通过表格、绝对定位或 flexbox 轻松完成。
Here's the flexbox that you need to know:
这是您需要了解的 flexbox：
.task-time: flex: 1 0 4em
.task-one-line i.fa { flex: 0 0 auto; }
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line i.fa { flex: 0 0 auto; }
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex: 1 0 4em;
-webkit-flex: 1 0 4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>回答by Or Bachar
I had a similar issue, I created a pen with the fix:
我遇到了类似的问题，我创建了一个带有修复程序的笔：
https://codepen.io/anon/pen/vRBMMm
https://codepen.io/anon/pen/vRBMMm
<div class="flex">
<div class="a">1st div</div>
<div class="b">HELLO2HELLO2 HELLO2HELLO2 2222 HELLO2HELLO 22222</div>
<div class="c">3rd div</div>
</div>
.flex {
display: flex;
padding: 8px;
border: 1px solid;
}
.a {
margin-right: 16px;
}
.b {
flex: 1;
background: #ffbaba;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.c {
flex-shrink: 0;
margin-left: 16px;
}
回答by Eugene
My general rule for flex is flex the containers you want to flex and don't flex the ones you do not. I would do the following to the time container.
我对 flex 的一般规则是伸缩你想要伸缩的容器，不要伸缩你不想伸缩的容器。我会对时间容器执行以下操作。
span.task-time {flex: none;}
span.task-time {flex: none;}
