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