Компонент, дочерние элементы которого могут его заполнить

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

У меня есть компонент, задачей которого является отображение некоторых дочерних элементов. Все, что делает этот компонент, это отображает некоторые стили — границу и фон — так что это просто блок.

Это поле может отображаться «динамически», поэтому статическая высота не будет указана — например, это может быть «flex-grow: 1».

Как заставить детей заполнить этот компонент целиком?

Это моя коробка:

class Box extends Component {
  render() {
    return (
      <div className={"box " + this.props.className}>
        <h2>BOX</h2>
        <div>{this.props.children}</div>
      </div>
    );
  }
}

Вот его стили:

.box {
  border-width: 5px;
  border-color: black;
  border-style: solid;
  background-color: purple;
}

В идеале ребенок должен просто установить «высота: 100%», но это не сработает, потому что Box не определяет никакой высоты.

Одним из решений было бы установить «display: flex» в div, внутри которого находится «{this.props.children}». Однако это требует, чтобы дети использовали "flex-grow: 1" - я думаю, что это не лучшее решение, потому что дети не должны знать, как реализован Box. Это также делает проблему рекурсивной - детям моих детей снова нужно использовать flex-grow...

//РЕДАКТИРОВАТЬ Вот пример: https://codesandbox.io/s/nervous-sunset-bvhjh

Бокс-контент должен заполнять все место, которое у него есть в Боксе, но это не так. Как этого добиться?

не могли бы вы добавить codeandbox, чтобы помочь понять проблему?

Gaël S 22.05.2019 16:24

@GaëlS Я привел пример

mnj 23.05.2019 20:34
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
2
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добиться этого в чистом css (таким образом, детям не нужно знать о режиме flex своих родителей):

.row2 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.row2 > div {
  flex-grow: 1;
}

путем укладки всех дочерних divs.

кодыпесочница, чтобы увидеть результат

Другие вопросы по теме