子容器相同的宽度父

我创建了以下网格： 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>

来源

2017-09-29 YesMan85

如果你可以改变你的标记，然后创建一个新的包装为各地.rows股利和应用目前提供给.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>

来源

2017-09-29 16:36:34 kukkuz

感谢的作品！有趣的是，现在'.row'元素也占据了整个宽度。 – YesMan85

子容器相同的宽度父

回答

相关问题