하위 컨테이너 부모

Question

동일 폭 I는 다음의 표를 만들었다.

또한 헤더 행을 검사하면 실제 행이 컨테이너의 너비가 아니라는 것을 알 수 있습니다.

너비가 컨테이너의 너비와 같을 수 있습니까? 당신이 당신의 마크 업을 변경할 수있는 경우

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