样式组件选择器DOM元素

Question

I've got a component hierarchy:

appParent.html
    <app-parent>
      <div class="someDiv"> // has width and height set
        <app-child></app-child>
      </div>
    </app-parent>

appChild.html:

  <div class="childWrapper"></div>

I would like to style app-child to have width an height equal to its container. My ultimate goal is to have .childWrapper the same width and height as .someDiv , but I do not want to bring JS into business

I applied

app-child{
  width:100%;
  height:100%;
}

but app-child remains 0x0px . I tried setting some random width and heights and app-child remains 0x0px at all times. Applying styles to .someDiv works as expected.

What is going on here? Why can't styles be applied to component selectors?

Answer 1

Given the above CSS on the child, it IS taking up 100% of the parent's height. The problem is that the parent does not have an explicit height set. Try setting the height of someDiv.

See this codepen: Full height child div

.someDiv {
    border:1px solid red;
    height:100px;
    width:200px;
}

.childWrapper {
    border: 1px solid blue; 
    width:100%;
    height:100%;
}