Child 个容器宽度与 parent 相同

Question

我创建了以下网格： https://codepen.io/anon/pen/mBwqQP

问题是包含数据的行只跨越屏幕的宽度。

此外，如果您检查 header 行，它会显示实际行不是容器的宽度。

是否可以让它们的宽度与它们所在的容器的宽度相同？

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

Child 个容器宽度与 parent 相同

Child containers same width as parent

html

css

overflow

calc