使父div与子节点宽度相同，并忽略父节点

Question

我有父母，子女和孙子divs。孙子需要以行显示，而不是列。我试图让孩子和孙子孙女（孩子的孩子）一样宽，但与此同时，我希望父母保留孙子孙女的身高。

我尝试让孩子到position: absolute，但问题是，父母没有留住孩子和孙子的身高。

如何使父级具有与其后代相同的高度，同时具有不同的宽度。让孩子和孙子们一样宽度？

JSFiddle

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrapper {
  background-color: lightblue;
  width: 220px;
}
#innerWrapper {
  display: flex;
  background-color: blueviolet;
}
.item {
  background-color: tomato;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 5px;
  flex: 1 0 auto;
}
#other {
  background-color: yellow;
  width: 300px;
  height: 250px;
}

<div id="wrapper">
  <div id="innerWrapper">
    <div class="item">Item - 1</div>
    <div class="item">Item - 2</div>
    <div class="item">Item - 3</div>
    <div class="item">Item - 4</div>
    <div class="item">Item - 5</div>
    <div class="item">Item - 6</div>
  </div>
</div>

<div id="other">I'm another element</div>

Answer 1

更新

OP希望：

1. 奶奶在220px，所以我给了她max-width:220px
2. 妈妈让孩子喜欢收缩包裹延伸过奶奶。我让她position:relative逃脱了奶奶的流量，min-width: 635px这是包含边距的孩子宽度的总和，min-height:110px这是孩子的高度和边距。< / LI>

3. kids display: inline-block，position: absolute。然后我使用这个left选择器给了他们nth的累积值为105px的区间：

   div div div:nth-of-type(X) {
       left:105px++
   }
   

   请参阅代码段以获得更清晰的图片。

妈妈的背景是半透明的，所以你可以看到黑色的奶奶。

#other被position:relative和top:110px移除了。




我想我明白你的意思。在这个片段中，我给了：

<德尔> 1。祖母display:table和table-layout:fixed  <删除> 2。妈妈display:table-row  <删除> 3。孩子display:table-cell

我添加了一个虚线边框border-spacing和一个半透明背景，以显示奶奶和妈妈的存在。这些添加是可选的。我也删除了flexbox属性。

SNIPPET（修订版）

＆＃13;
＆＃13;
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrapper {
  background-color: black;
  max-width: 220px;
  float: left;
}
#innerWrapper {
  background-color: rgba(0, 0, 200, .5);
  display: inline-block;
  position: relative;
  display: flex;
  min-width: 635px;
  min-height: 110px;
}
.item {
  background-color: tomato;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 5px;
  display: inline-block;
  position: absolute;
}
div div div:nth-of-type(2) {
  left: 105px;
}
div div div:nth-of-type(3) {
  left: 210px;
}
div div div:nth-of-type(4) {
  left: 315px;
}
div div div:nth-of-type(5) {
  left: 420px;
}
div div div:nth-of-type(6) {
  left: 525px;
}
#other {
  background-color: yellow;
  width: 300px;
  height: 250px;
  position: relative;
  top: 110px;
}
＆＃13;
<div id="wrapper">
  <div id="innerWrapper">
    <div class="item">Item - 1</div>
    <div class="item">Item - 2</div>
    <div class="item">Item - 3</div>
    <div class="item">Item - 4</div>
    <div class="item">Item - 5</div>
    <div class="item">Item - 6</div>
  </div>
</div>

<div id="other">I'm another element</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

从您的样式中删除flux-box，然后移除您孩子的width。我添加了demo here