Question

我有3 divs包裹在3 divs中。除第一个div之外的所有内容都设置为width: 0，并且它们都设置为inline-block。最外层div的设置高度为166px。

所以它出来了，你看到的唯一的孩子（7）divs是第一个。问题是，第三个包装器（.wrapperLongInner）的高度大于其祖父母div。 .wrapperLongInner's高度的计算方式就好像7 divs相互排列一样，即使它们由于flex而并排排列。

默认情况下，如何让.wrapperLongInner与父母的身高相同？

JSFiddle

＆＃13;

.wrapperShortOuter {
  overflow: hidden;
  background-color: lightgreen;
}
.wrapperLongInner {
  display: flex;
  align-items: flex-start;
  background-color: lightblue;
}
.content {
  overflow: hidden;
  display: inline-block;
  width: 0;
}

＆＃13;

<div id="fullWrapper" style="height: 166px; width: 536px;">
  <div class="wrapperShortOuter">
    <div class="wrapperLongInner" style="width: 1072px;">
      <div class="content" style="width: 536px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
      <div class="content">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</div>
      <div class="content">Tin voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
      <div class="content">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</div>
      <div class="content">doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem</div>
      <div class="content">quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
      <div class="content">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
        ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

根据你提供的html，似乎你可以给它的父母（.wrapperShortOuter）height: 100%，而这又会占据其父母的父亲身高＆＃34;：< / p>

JS Fiddle

.wrapperShortOuter {
    overflow: hidden;
    background-color: lightgreen;
    height: 100%;
}

Answer 2

您应该为父级和祖父级div设置高度。从内容div中删除width:0;，然后添加float:left

.wrapperShortOuter{
height:100%;
}
.wrapperLongInner{
height:100%
}
.content{
float:left;
}

Answer 3

您在CSS课程height: inherit;上使用.wrapperShortOuter。

inherit关键字指定属性应继承其值来自其父元素。

实例： https://jsfiddle.net/etnkj0Lp/2/

.wrapperShortOuter {
    overflow: hidden;
    background-color: lightgreen;
    height: inherit;
}

Answer 4

您必须在 .wrapperLongInner 类中提供高度：100％，如下所示： -

.wrapperLongInner {
    display: flex;
    align-items: flex-start;
    background-color: lightblue;
    height: 100%;
}

注意： - 在 Internet Explorer 中，如果高度：100％，则会使用链接机制。因此，您必须为链中的所有div提供高度：100％，直到具有固定高度（不是百分比）的父div出现。如果链断裂，则不会对div应用高度。对于I.E.你需要做这样的事情以及上面的代码： -

.wrapperShortOuter {
    overflow: hidden;
    background-color: lightgreen;
    height: 100%;
}

您可以在此处参考jsFiddle。

子div的高度与父div

JSFiddle

4 个答案: