Ignore flex container children but not grandchildren

Question

I have a simple flex element with some children, something like this:

.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>

I am using flex wrap so, when screen goes smaller they stack.

Now, I want to reload fourth and fifth element using an ajax call to reload both elements, for this I need to put both children inside a container, but when I do, it becomes a new flex child

.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>

I am looking for a way to ingore this "subcontainer", and keep the children working as before.

Is this possible?

your selector in css, selects only first layer children divs in container, in order to do what you need, you must specify your flex divs with some class name, such as .flex-box whitout greater than sign '>', so you can do what you need — Arash Khajelou, Sep 05 '18 at 18:11
You are right, let me remove that '>', I tried using a class as you said here: http://jsfiddle.net/bc3o4j75/1/ but is not working :( — stramin, Sep 05 '18 at 18:16

Temani Afif · Accepted Answer · 2020-08-22T08:53:51.683

Use display:contents (https://css-tricks.com/get-ready-for-display-contents/) but pay attention to the support (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>

Michael Benjamin · Answer 2 · 2018-09-05T18:50:02.117

2

If the element is a child of a flex container, then it becomes a flex item. That's the general rule.

However, most browsers will ignore that rule when the child is absolutely positioned.

I'm not sure that's a useful solution in this case, but that's what you would have to do: absolutely position .subcontainer and make it flex container, so that the children become flex items.

edited Sep 05 '18 at 18:50

answered Sep 05 '18 at 18:37

Michael Benjamin

346,931
104
581
701

or we start to think about the display:contents even if it's not well supported yet – Temani Afif Sep 05 '18 at 19:19
Yes, I considered that. But since there's weak support, I didn't bother to mention it. Here's an in-depth review: https://stackoverflow.com/q/47929369/3597276 @TemaniAfif – Michael Benjamin Sep 05 '18 at 19:26

Ignore flex container children but not grandchildren

2 Answers2

Linked

Related