Flexbox: Making an inline component expand the full width of the the parent container

Question

I have inherited this project from someone else and I would not have set it up like this in the first place, but I have this component list-item-component :

<!--  These are for the glyph chevrons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-lg-6 item" *ngFor="let item of pageOfItems; let i = index">
        <div class="well col-sm" (click)="showDetails(i)" [ngClass]="{'expanded': i === index}">
            <div>
                <span *ngIf="i !== index" id="spTitleGlyphRow#row#Col1" class="glyphicon glyphicon-chevron-right programTitleGlyph" aria-hidden="true"> </span>
                <span *ngIf="i === index" id="spTitleGlyphRow#row#Col2" class="glyphicon glyphicon-chevron-down programTitleGlyph" aria-hidden="true"> </span>
                <span id="spTitleRow#row#Col1" class="programTitle">{{item.programName}}</span>
            </div>
            <div *ngIf="i === index" id="dvProgramContentRow">
                <div class="programInformation">
                    <p>{{item.description}}</p>
                </div>
                <div class="programContact">
                    <b>Contact:</b> {{item.fullName}}<br />
                    <b>Email:</b>   {{item.email}}<br />
                    <b>Phone:</b>   {{item.phone}}<br />
                    <b>Sector:</b> {{item.baseLocation}}
                    <br /><br />
                    <a href="{{item.website}}" target="_blank" class="btn btn-md btn-warning" role="button">Visit Site</a>
                    &nbsp;
                    <button (click)="showMap(item.streetAddress)" class="btn btn-md btn-primary" role="button" [disabled]="item.streetAddress == 'na' || item.streetAddress == ''">Location</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <app-pagination
    [items]="list"
    (changePage)="onChangePage($event)"
    [pageSize] = "selectedOption"
    [renderPage] = "renderPage"
    ></app-pagination>
</div>

Here is the css for the page:

.well {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 30px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 5px;
    cursor: pointer;
    #dvProgramContentRow{
        display: flex;
        margin-left: 10px;
        .programInformation{
            flex: 2;
        }
        .programContact{
            flex: 1;
        }
    }
}
.expanded {
    background-color: #4B494C;
    color: white;
}
.item {
    padding: 5px;
}
.glyphicon{
  margin-right: 5px;
}

And this is the list that uses these list-items:

<div class="container">
    <div class="row well jhuBlue" >
        <div class="col-sm-6 col-md-6 col-lg-8 color-blue">
            <span class="CategoryHeader" *ngIf="list">{{list[0].categoryName}} - Program Names & Details</span>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-2">
            <span class="CategoryHeader">Show</span>
            <select id="ddlDisplayNumber" [(ngModel)]="selectedOption" name="ddlDisplayNumber">
                <option [ngValue]="listToShow.length">All</option>
                <option [ngValue]=10>10</option>
                <option [ngValue]=15>15</option>
                <option [ngValue]=20>20</option>
            </select>
            <span class="CategoryHeader">Rows</span>
        </div>
        <div id="dvFilterClick" class="col-sm-3 col-md-3 col-lg-2 jhuBlue text-right">
            <span class="spFilterBy CategoryHeader" (click)="openFilter()">Filter By<img src="../../../assets/images/white-down-arrow-png-2.png" height="27px" width="27px"></span>
        </div>
    </div>
<!--    <app-filter *ngIf="showFilter"-->
<!--        (selectedLocations)="filterByLocation($event)"-->
<!--    ></app-filter>-->
  <div *ngIf="showFilter" id="dvFilterByRow" class="row">
    <div class="col-lg-12">
      <div id="dvFilterByContentRow" class="well dvFilterByContent">
        <div id="dvFilterByProgramContentRow" style="margin-left: 10px">
          <span style="font-size:1.2em"><b>LOCATIONS</b></span>
          <br /><br />
          <table class="clsLocationTable">
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnbv" name="cklnbv" [value]="1">
                <label for="cklnbv">Bayview and surrounding areas</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnshe" name="cklnshe" value="4">
                <label for="cklnshe">Harbor East</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnwmtw" name="cklnwmtw" value="7">
                <label for="cklnwmtw">Mt. Washington</label>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhdcw" name="cklnsnhdcw" value="2">
                <label for="cklnsnhdcw">City-wide</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsnhd" name="cklnsnhd" value="5">
                <label for="cklnsnhd">Homewood and surrounding areas</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnsn" name="cklnsn" value="8">
                <label for="cklnsn">Station North</label>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklneb" name="cklneb" value="3">
                <label for="cklneb">East Baltimore</label>
              </td>
              <td>
                <input type="checkbox" (change)="onCheckChange($event)" id="cklnmtvn" name="cklnmtvn" value="6">
                <label for="cklnmtvn">Mt. Vernon</label>
              </td>
              <td>&nbsp;
              </td>
            </tr>
          </table>
          <input id="btnFilter" name="btnFilter" type="submit" value="Filter" (click)="onFilterSubmit()">
        </div>
      </div>
    </div>
  </div>

    <app-list-item *ngIf="list"
        [list] = "listToShow"
        [selectedOption] = "selectedOption"
    ></app-list-item>
</div>

And the css:

.jhuBlue {
    background-color: #005eb8;
}

.well {
    padding: 30px;
}

.CategoryHeader {
  color: white;
}

.spFilterBy {
    cursor: pointer;
}

#dvFilterByRow {
  margin-bottom: 5px;
  padding: 30px;
  overflow: hidden;
  background-color: #D3D3D3;
}

This is the current behavior:

If you need the.ts this is the only relevant code:

  showDetails(index) {
    if (index === this.index) {
      this.index = -1;
    }else{
      this.index = index;
    }
  }

What I need to happen is for the expanded black area div dvProgramContentRow to take up the whole row. So instead of pushing the next row down to provide more room I'd like to just cover up the element to its left or if you click the left then expand to cover the item to the right. So basically expand horizontally rather than vertically. Like this:

How can I change the styling I have to make this happen?

Answer 1

We can use inbuilt HTML element <details> . I have not used your classes. See the out put in full page mode.

 :root { --margin: 5px; } * { box-sizing: border-box; }.container { width: 100%; border: 1px dashed gray; padding: 5px; }.wrapper { display: inline-block; width: calc(50% - var(--margin) * 2.5); margin: var(--margin); padding: var(--margin); } details { background-color: #eee; padding: var(--margin); }.wrapper:nth-child(even)>details[open] { width: calc(200% + var(--margin) * 2.5); background-color: rgb(30, 12, 12); color: white; z-index: 100; transform: translateX(calc(-50% - var(--margin) * 2.5)); }.wrapper:nth-child(odd)>details[open] { width: calc(200% + var(--margin) * 2.5); background-color: rgb(30, 12, 12); color: white; z-index: 100; position: sticky; } summary { cursor: pointer; }

 <div class="container"> <div class="wrapper"> <details> <summary>One</summary> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat t.netur temporibus? Eveniet. </p> </details> </div> <div class="wrapper"> <details> <summary>Two</summary> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat t.netur temporibus? Eveniet. </p> </details> </div> <div class="wrapper"> <details> <summary>Three</summary> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat t.netur temporibus? Eveniet. </p> </details> </div> <div class="wrapper"> <details> <summary>Four</summary> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat t.netur temporibus? Eveniet. </p> </details> </div> </div>

---

Covering element on the same row makes it inaccessible. User will have to shrink the expanded element first to see the other element on the same row. We can expand elements to take the entire row:

 * { box-sizing: border-box; }.container { width: 100%; border: 1px dashed gray; padding: 5px; } details { display: inline-block; width: calc(50% - 13px); background-color: #eee; margin: 5px; padding: 5px; } details[open] { width: 100%; background-color: rgb(30, 12, 12); color: white; } summary { cursor: pointer; }

 <div class="container"> <details> <summary>One</summary> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis, dolorem sequi delectus nemo eum iusto qui explicabo commodi eveniet quod aliquam totam enim reiciendis fugiat t.netur temporibus? Eveniet.</p> </details> <details> <summary>Two</summary> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis. </p> </details> <details> <summary>Three</summary> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis. </p> </details> <details> <summary>Four</summary> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum cupiditate perspiciatis.</p> </details> </div>

Answer 2

If it's possible you could change the arrow button to a hidden checkbox element to use it as a toggle. Then do something like this:

 .checkbox:checked ~.allOtherCols { display: none; // or hide it however you want really }

Then you could grow the checked selected div 100%.