How to override inline styles in a child div?

Question

I have two divs like below

<div class="parent">
  <div class="child">
  </div>    
</div>

Now in the child div, I see a style called height with some pixels when I inspect it. I am surprised how its not applied to the parent div.

I want to override the style to 100px from its 30px.

My application is an angular and css3 html5, web api mvc based app.

How to do it?

I tried this

div[style] {
 height: 100px;
}

Answer 1

If you say that inline style is being inserted dynamically and you don't know how you can't change (you really should debug till you find out how is being inserted) then to be more specific than inline styling, only using !important

NOTE this is one of the extreme cases that !important should be used. Otherwise AVOID IT

.child {
  background: red;
  height: 100px !important;
  width: 100px
}

<div class="parent">
  <div class="child" style="height: 30px">
  </div>
</div>

You can see an answer of mine here with more details regarding this subject.