子容器与父容器宽度相同答案

【问题标题】：Child containers same width as parent子容器与父容器宽度相同
【发布时间】：2018-03-11 14:45:49
【问题描述】：

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

【问题讨论】：

标签： html css overflow calc

【解决方案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>

【讨论】：

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