子コンテナと同じ幅親

Question

として、私は以下のグリッドを作成しました： https://codepen.io/anon/pen/mBwqQP

問題は、データを持つ行のみ限り、画面の幅とまたがっていることです。

ヘッダー行を調べると、実際の行はコンテナーの幅ではありません。

これらの幅は、現在のコンテナと同じにすることはできますか？

.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

あなたは.rows divの周りのために新しいラッパーを作成し、現在.rowsに与えられたスタイル適用、その後、あなたのマークアップを変更することができる場合：のために、今すぐ

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

を.rowsお申し込みいただけますdisplay: inline-block

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

デモは、以下を参照してください：作品

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