CSS Flexbox fill when content available - html

Question

I am currently working on a TODO App. This TODO app shows tasks horizontally for the user. In a normal case we have the task which has to be done, with a click on it the user can mark it as done.
However, I now wanted to add the option to assign a due date to it.
What I want to achieve is:
Have the todo text shown in the div box
If a date is given, add the date to the right side of the box
My current code is as following:
.box-task .task-text {
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 0 0;
flex: 1 0 0;
font-weight: 400;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 8px;
margin-top: 7px;
}
.box-task .task-date {
font-size: 13px;
margin-top: 9px;
color: rgb(50, 138, 214);
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 0 0;
flex: 1 0 0;
padding-left: 5px;
padding-right: 5px;
}
My HTML code is (in mix with Laravel blade), I hope you get the idea of what I want to achieve
<div class="col-md-12 col-task-text" style="height:35px;">
<div class="task-checkbox-checked" data-id="1"></div>
<span class="task-text">Test</span>
<span class="task-date">23-05-1995</span>
</div>
</div>
How can I achieve it that the date is always shown on the right side with its own width and the text does get smaller/bigger based on if the date was added?

Answer 1

From everything available so far in your question, I assume the following:
you're trying to display a list of tasks
each task should be displayed on a single row, with a title on left and date on the right side
if the title doesn't fit available space, it should be cut with ellipsis effect.
you're using Bootstrap v3.
If the above is true, this is what you're looking for:
.box-task .task-text {
display: block;
flex: 1 1 auto;
font-weight: 400;
font-size: 15px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 8px;
margin-top: 7px;
}
.box-task .task-date {
font-size: 13px;
margin-top: 9px;
color: rgb(50, 138, 214);
display: flex;
flex: 0 0 auto;
padding-left: 5px;
padding-right: 5px;
}
.col-task-text {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row box-task">
<div class="col-md-12 col-task-text" style="height:35px;">
<div class="task-checkbox-checked" data-id="1"></div>
<span class="task-text">Test</span>
<span class="task-date">23-05-1995</span>
</div>
<div class="col-md-12 col-task-text" style="height:35px;">
<div class="task-checkbox-checked" data-id="2"></div>
<span class="task-text">Test</span>
<span class="task-date">23-05-1995</span>
</div>
<div class="col-md-12 col-task-text" style="height:35px;">
<div class="task-checkbox-checked" data-id="3"></div>
<span class="task-text">Test with a lot more text, lorem ipsum dolor sit amet. Test with a lot more text, lorem ipsum dolor sit amet.</span>
<span class="task-date">23-05-1995</span>
</div>
</div>
</div>
There were quite a few details I needed to fix, but the most important ones were:
you need display:inline-block (or block) for text-overflow:ellipsis to work
the display:flex needs to be on the parent, not on the children for flex:{grow} {shrink} {basis}; shorthand to work.
If you're going to use flexbox you need to read CSS documentation*** available on each of its properties. The most important part is to understand which props go on parent and which on children and how they all work together.
*** Candidate Recommendation (oficial spec). You might find this resource useful.
The rest are details.
If the above is not what you're looking for, please update your question with all the info I had to assume and, if I can help, I'll update my answer. If not, I'll delete it.