Child containers same width as parent

Question

I created the following grid: https://codepen.io/anon/pen/mBwqQP

Problem is that the rows with data only span as far as the width of the screen.

Also if you inspect the header row it shows the actual row is not the width of the container.

Is it possible to have the width of those the same as the container they are in?

.schedule-grid {
  width: 100%;
}

.schedule-grid .rows {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}

.schedule-grid .rows .header-row {
  margin: 0;
  height: auto;
}

.schedule-grid .rows .header-row>div {
  width: 250px;
  display: inline-block;
  white-space: normal;
}

.schedule-grid .rows .fixed {
  width: 150px !important;
  position: absolute;
  left: 0px;
}

.schedule-grid .rows .row {
  margin: 0;
  background-color: red;
}

.schedule-grid .rows .row>div {
  font-size: 12px;
  padding: 5px;
  height: 25px;
  background-color: red;
}

<div class="schedule-grid">
  <div class="rows">
    <div class="header-row">
      <div class="fixed">Name / Date</div>
      <div>
        Fr 1 Sep
      </div>
      <div>
        Sa 2 Sep
      </div>
      <div>
        Su 3 Sep
      </div>
      <div>
        Mo 4 Sep
      </div>
      <div>
        Tu 5 Sep
      </div>
      <div>
        We 6 Sep
      </div>
      <div>
        Th 7 Sep
      </div>
      <div>
        Fr 8 Sep
      </div>
      <div>
        Sa 9 Sep
      </div>
      <div>
        Su 10 Sep
      </div>
    </div>
    <div class="row">
      <div class="fixed ">
        Name
      </div>
      <div>
        Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
      </div>
    </div>
  </div>
</div>

Answer 1

If you can change your markup, then create a new wrapper for around the .rows div and apply the style currently given to .rows:

.schedule-grid > div {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}

Now, for the .rows you can apply display: inline-block

.schedule-grid .rows {
  display: inline-block;
}

See demo below:

.schedule-grid {
  width: 100%;
}
/*
.schedule-grid .rows {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}
*/
.schedule-grid > div {
  width: calc(100% - 150px);
  overflow: auto;
  white-space: nowrap;
  margin-left: 150px;
}
.schedule-grid .rows {
  display: inline-block;
}
.schedule-grid .rows .header-row {
  margin: 0;
  height: auto;
}
.schedule-grid .rows .header-row > div {
  width: 250px;
  display: inline-block;
  white-space: normal;
}
.schedule-grid .rows .fixed {
  width: 150px !important;
  position: absolute;
  left: 0px;
}
.schedule-grid .rows .row {
  margin: 0;
  background-color: red;
}
.schedule-grid .rows .row > div {
  font-size: 12px;
  padding: 5px;
  height: 25px;
  background-color: red;
}

<div class="schedule-grid">
  <div>
   <div class="rows">
      <div class="header-row">
         <div class="fixed">Name / Date</div>
         <div>
            Fr 1 Sep
         </div>
         <div>
            Sa 2 Sep
         </div>
         <div>
            Su 3 Sep
         </div>
         <div>
            Mo 4 Sep
         </div>
         <div>
            Tu 5 Sep
         </div>
         <div>
            We 6 Sep
         </div>
         <div>
            Th 7 Sep
         </div>
         <div>
            Fr 8 Sep
         </div>
         <div>
            Sa 9 Sep
         </div>
         <div>
            Su 10 Sep
         </div>
      </div>
      <div class="row">
         <div class="fixed ">
            Name
         </div>
         <div>
            Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123 Test 123
         </div>
      </div>
   </div>
</div>
</div>