angular - click flexbox grid cell to expand area below with full width - css

Question

I have something like calendar grid using flexbox inside a ionic 3 project.
The cells are one array
<div class="sb-calendar-wrapper">
<div class="sb-calendar-month">
<div class="sb-calendar-row">
<div class="sb-calendar-cell sb-cell-labels sb-week-day" *ngFor="let day of sbcalendar.dayLabels">
{{day}}
</div>
</div>
<div class="sb-calendar-row">
<div class="sb-calendar-cell sb-cell" *ngFor="let day of calendarDays, let j=index" (click)="openCalendarDay(day)" [ngStyle]="{'height': (day.isOpen) ? '300px' : '60px'}">{{j}}
</div>
</div>
</div>
</div>
.sb-cell {
position: relative;
border-bottom: 1px solid rgba(130, 171, 183, 0.2);
padding: 5px;
height: calc((100vh - 150px)/6);
.sb-calendar-day-list{
position: absolute;
width: 100vw;
left: 0;
top:calc((100vh - 150px)/6);
background: #ccc;
height: calc( 300px - calc((100vh - 150px)/6));
}
}
When I click on any day, i want the "row" to expand to display an area which I can use for e.g. displaying items of that cell.
The problem I'm facing is how to position that list element, so that i will fill the entire space or width. With position:relative of the cell I can position everything fine except for the left:0, which doesnt work for most cells.
In summary when i click any day, a box that fills the entire view width should expand. thanks for any suggestions!
EDIT1
I don't want to create manual rows after each n-cell. The cell array should stay as a single array while the flexitem widths controls how many items are in each row.

Answer 1

I think you can organize those days on the same line as a row.
At the end of each row, you can add a place holder div with an ng-if condition.
Whenever you click on a day of that row, you can check the row index for showing the div or not. That div will hold an area that you want.
html:
<div class="flexbox-row" ng-repeat="row in rows track by $index">
<div class="flexbox-col clickable" ng-click="showRow($index)">
1
</div>
<div class="flexbox-col clickable" ng-click="showRow($index)">
2
</div>
<div class="flexbox-col clickable" ng-click="showRow($index)">
3...
</div>
<!-- Place holder div -->
<div ng-if="showRow() === $index">
<div data-custom-directive></div>
</div>
</div>
Show row code:
scope.showRow = function ($index) {
// Return activeRow
if ($index === undefined) {
return scope.activeRow;
}
// Hide if same row
if ($index === scope.activeFlight) {
scope.activeRow = null;
return;
}
// Show row
scope.activeRow = parseInt($index);
};