title: flexbox | flex item being pushed out of containing div (off screen)
body: <p>I'm using the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">flexbox layout</a> to style a list of past tasks. The task description and the time are always going to be of very variable lengths.</p>
  
  <p>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.</p>
  
  <p>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!!</p>
  
  <p><img src="https://i.stack.imgur.com/wdFXm.png" alt="flex-item-pushed-off-screen-chrome"></p>
  
  <p><strong>Here's <a href="http://jsfiddle.net/pmdav1eg/" rel="noreferrer">a fiddle</a> for the code</strong> (which is below as per Stackoverflow's rules).
  If you <em>resize the pane containing the result</em> the '00:08' doesn't fall off the page but it does clearly move too far to the right. </p>
  
  <p>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.</p>
  
  <p><strong>I would like everything to display as per the first (short description) line if possible!</strong> And also to understand why this is behaving as it currently is.</p>
  
  <p><em>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 :)).</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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  ;*/
            }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ul id="tasklist"&gt;
          &lt;li class="task-one-line"&gt;
              &lt;i class="fa fa-check-circle-o"&gt;&lt;/i&gt;
              &lt;span class="task-desc"&gt;And a short one&lt;/span&gt;
              &lt;span class="task-time"&gt;00:01&lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="task-one-line"&gt;
              &lt;i class="fa fa-check-circle-o"&gt;&lt;/i&gt;
              &lt;span class="task-desc"&gt;Here's a super long long long long long long description that might wrap onto another line&lt;/span&gt;
              &lt;span class="task-time"&gt;00:08&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>