flexbox | flex item being pushed out of containing div (off screen)

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.

Here's the flexbox that you need to know:

.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>

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

https://codepen.io/anon/pen/vRBMMm

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

Tags:

Css

Flexbox

Recent Posts