Игнорировать детей из гибкого контейнера, но не внуков

Question

У меня есть простой элемент flex с некоторыми детьми, примерно так:

.container{
  display: flex;
  flex-wrap: wrap;
}
.container div.flex-box{
  width: 200px;
  margin: 20px;
  padding: 20px;
  font-size: 40px;
  border: 1px solid;
}

<div class='container'>
  <div class='flex-box'>one</div>
  <div class='flex-box'>two</div>
  <div class='flex-box'>three</div>
  <div class='flex-box'>four</div>
  <div class='flex-box'>five</div>
  <div class='flex-box'>six</div>
</div>

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

Теперь я хочу перезагрузить четвертый и пятый элемент с помощью вызова ajax для перезагрузки обоих элементов, для этого мне нужно поместить обоих потомков в контейнер, но когда я это сделаю, он станет новым дочерним элементом flex

.container{
  display: flex;
  flex-wrap: wrap;
}
.container div.flex-box{
  width: 200px;
  margin: 20px;
  padding: 20px;
  font-size: 40px;
  border: 1px solid;
}

<div class='container'>
  <div class='flex-box'>one</div>
  <div class='flex-box'>two</div>
  <div class='flex-box'>three</div>
  <div class='subcontainer'>
    <div class='flex-box'>four</div>
    <div class='flex-box'>five</div>
  </div>
  <div class='flex-box'>six</div>
</div>

Я ищу способ заполучить этот «подконтейнер» и сохранить работу детей, как прежде.

Возможно ли это?

Answer 1

Используйте display:contents (https://css -tricks.com / get-ready-for-display-contents / ), но, к сожалению, по-прежнему отсутствует поддержка (https://caniuse.com/#feat=css-display-contents)

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div.flex-box {
  width: 200px;
  margin: 20px;
  padding: 20px;
  font-size: 40px;
  border: 1px solid;
}

.subcontainer {
  display: contents
}

<div class='container'>
  <div class='flex-box'>one</div>
  <div class='flex-box'>two</div>
  <div class='flex-box'>three</div>
  <div class='subcontainer'>
    <div class='flex-box'>four</div>
    <div class='flex-box'>five</div>
  </div>
  <div class='flex-box'>six</div>
</div>

Answer 2

Если элемент является дочерним по отношению к гибкому контейнеру, он становится гибким элементом. Это общее правило.

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

Я не уверен, что это полезное решение в этом случае, но это то, что вам нужно сделать: абсолютно позиционируйте .subcontainer и сделайте его гибким контейнером, чтобы дочерние элементы стали гибкими элементами.