Я ценю ваш ответ, но суть этого вопроса заключается в том, как использовать сторонний компонент, не мешая его стилям.
ользую сторонний компонент, который занимает все доступное пространство, т.е.width=100%
а такжеheight=100%
, Я не могу это контролировать.
Я пытаюсь вписать его в следующий макет, но егоheight=100%
не работает (я ожидаю, что сторонний компонент займет всю зеленую зону).
Почему? Как бы вы это исправить?
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
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);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>