Why height=100% doesn't work?

Question

I use a third-party component that occupies all the available space, i.e. width=100% and height=100%. I don\'t have control over it.

I\'m t

Answer 1

Because .content haven't height (height = 0px) and .third-party-component have 100% of 0px. You can add propety height : calc (100% - ) into .content

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  height: calc(100% - 18px);
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

  
Header
  

    

      Third party component