сделайте flex-item honor width только при наличии контента

Question

Я хочу создать flex-элемент, который занимает ширину 33% контейнера, только если присутствует некоторое содержимое следующим образом:

<FlexItem width='33%'> <Somedom /> </FlexItem>

Здесь FlexItem - это компонент, который может принимать все свойства flex в качестве реквизита и отображать div. Теперь Somedom может отображать null в dom, и в этом случае я хочу, чтобы FlexItem вообще не занимал ширину и позволял бы дочернему элементу div заполнить весь контейнер.

Мне было интересно, есть ли какое-нибудь гибкое соглашение, которое может помочь мне достичь этого. Кроме того, у меня нет хорошего способа узнать, будет ли он отображать контент или нет. Я не хочу перемещать компонент FlexItem в Somedom.

Answer 1

Используя @ 04FS предложение : пусто

Вы можете сделать что-то столь же простое, как это.

.FlxRw {
  display: flex;
}
.Flx {
  flex:0 0 33%;
  background:#cdf;
}
.Flx:empty {
  flex:0 0 0%;
}

<div class="FlxRw">
  <div class="Flx"></div>
</div>

<div class="FlxRw">
  <div class="Flx">Content</div>
</div>

<div class="FlxRw">
  <div class="Flx"></div>
</div>