flexbox |弹出项目被推出包含div（关闭屏幕）

I'm using the flexbox layout to 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 fiddle for the code (which is below as per *'s rules). If you resize the pane containing the result the '00:08' doesn't fall off the page but it does clearly move too far to the right.

这是代码的小提琴(根据*的规则在下面)。如果您调整包含结果的窗格的大小,则'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 :)).

附:我曾尝试使用浮动并使用表格显示布局,但这两种技术都造成了相当多的错误,主要是因为可变长度内容(所以请不要建议这些作为替代:))。

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>

3 个解决方案

#1

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>

#2

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;}

#3

I had a similar issue, I created a pen with the fix:

我有一个类似的问题,我用修复创建了一支笔:

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;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.c {
  flex-shrink: 0;
}