flexbox |弹出的项目被推出包含div（屏幕外）

Question

我使用flexbox layout风格的过去任务列表。任务描述和时间总是变化很大。

一切看起来都很棒，直到输入任务描述足够长的时间才能包装到第二行，然后'时间'项目（在屏幕的最右侧）稍微向右 - 离开屏幕 - 隐藏了一些内容。

您可以在下方看到完美的简短说明，但是长的推子会将'00：08'推离屏幕，任务描述也向左移动！

这里的a fiddle针对码（其下面是按照＃1的规则）。 如果您调整包含结果的窗格的大小，'00：08'不会脱离页面，但它确实移动得太靠右了。

上述屏幕截图在缩小窗口宽度之前将Chrome或Safari（我使用的两个浏览器）放在第二行描述中。

如果可能，我希望所有内容都按第一条（简短说明）行显示！而且还要理解为什么这是现在的行为。

P.S.我曾尝试使用浮动，并使用表格显示布局，但这两种技术都造成了相当多的错误，主要是因为可变长度的内容（所以请不要将这些作为替代方法:)）。

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>

Answer 1

真的，你只需要在文本内容有一个灵活的宽度（时间和图标应该有一个固定的宽度，而不是收缩）。这可以通过表格，绝对定位或flexbox轻松完成。

下面是你需要知道的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>

Answer 2

我的柔性一般规则是弯曲的容器要弯曲，不弯曲那些你不要。我会做下面的时间容器。

span.task-time {flex: none;}

Answer 3

我有一个类似的问题，我创建了修复笔：

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