html - 子容器与父容器宽度相同

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>