Я ценю ваш ответ, но суть этого вопроса заключается в том, как использовать сторонний компонент, не мешая его стилям.

ользую сторонний компонент, который занимает все доступное пространство, т.е.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>

 Usagi Miyamoto29 окт. 2017 г., 08:02
Фрагмент работает как задумано ....

Ответы на вопрос(3)

Решение Вопроса

height чтобы подобрать рост своего родителя, родитель долженвысота, кромеauto или быть позиционированным абсолютным, илиheight будет вычислено какauto.

Исходя из этих двух вариантов, и, как вы упомянули в комментарии, ваш собственный заголовок имеет динамическую высоту, и вам остается абсолютное позиционирование.

Проблема с добавлением абсолюта кcontent, он будет извлечен из потока и перестанет вести себя как обычный гибкий элемент, хорошие новости, можно добавить обертку, установленную в абсолют.

Фрагмент стека

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

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

.content {
  position: relative;                               /*  added  */
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.wrapper {
  position: absolute;                               /*  added  */
  left: 0;                                          /*  added  */
  top: 0;                                           /*  added  */
  right: 0;                                         /*  added  */
  bottom: 0;                                        /*  added  */
}

.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="wrapper">
      <div class="third-party-component">
       Third party component
      </div>
    </div>
  </div>
</div>

Другим вариантом может быть обновление свойств Flexbox, чтобы датьcontent высота, используяflex: 1 1 100% и датьheader flex-shrink: 0; так что не сжимается (какcontent получил 100%).

Это может не сработать в Safari, хотя, как я знаю, у него были проблемы, когдаheight свойство не установлено, хотя я не могу проверить это сейчас, так как у меня нет доступа к Safari.

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

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

.content {
  flex: 1 1 100%;
  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>

Потому что.content не иметь высоту (высота = 0 пикселей) и.third-party-component 100% от 0px. Вы можете добавить пропетыheight : calc (100% - <height of .header>) в.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);
}
<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

 Thuc Nguyen29 окт. 2017 г., 07:06
Потому что.content не иметь высоту (высота = 0 пикселей) и.third-party-component 100% от 0px. Вы можете добавить пропетыheight : calc (100% - <height of .header>) в.content
 Thuc Nguyen29 окт. 2017 г., 07:42
Пример: высота.header составляет 20%, вы должны установить высоту.content 80% ИЛИ, если не установлена ​​высота.headerЯ думаю, что вы должны использовать JS, чтобы получить высоту.header затем установите высоту для.content
 LGSon29 окт. 2017 г., 13:29
Я вижу, что за вас проголосовали (и не я), и как кто-то не сказал почему, я буду. Заявления, которые(высота = 0 пикселей) и что компонент имеет100% от 0px это неправильно. Проверьте мой ответ, как это работает.
 Misha Moroshko29 окт. 2017 г., 07:09
Дело в том, что высота заголовка является динамической / неизвестной.

.content элемент:

.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;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  flex-grow: 1;
  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>

 Amit29 окт. 2017 г., 07:10
Определение селекторов и правил CSS не изменяет «компонент». Вы всегда можете сделать это. Вы можете использовать вложенный селектор, если вы не хотите целиться по классу (.content > divили какой-то другой вариант), если это имеет значение для вас.
 Misha Moroshko29 окт. 2017 г., 06:59
Обратите внимание, что вы не можете изменить сторонний компонент, поэтому добавлениеflex-grow: 1 это не считается решением.
 Misha Moroshko29 окт. 2017 г., 07:17
Я ценю ваш ответ, но суть этого вопроса заключается в том, как использовать сторонний компонент, не мешая его стилям.

Ваш ответ на вопрос