How to exclude the first item in a flexbox wrap?

Question

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

<div class="container">       <div id="tobeexcluded">abc</div>   <div class="flexitem">content</div>   <div class="flexitem">content</div>   <div class="flexitem">content</div> </div> 

EDIT: I've tried now

:not(:first-child) 

and also

:not(#tobeexcluded) 

but it's not working. This is the actual class construction, it's a drupal view:

.view-id-reference_list .view-content:not(:first-child) { display: flex flex-flow: wrap } 

Fiddle: https://jsfiddle.net/m62090za/4/

Here's what i want: https://jsfiddle.net/Lxhpwqzn/1/ but without changing the markup.

Answer 1

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

After some initial confusion we now understand that what is actually required is for the content to wrap after the first div.

Obviously, the simplest method to achieve this is for the first div to be 100% wide of the parent.

.view-container .view-content {    display: flex;    flex-wrap: wrap;    justify-content: space-between;  }  .filterbox {    flex: 0 0 100%;  }

<div class="view-container">    <div class="view-content">      <div class="filterbox">FILTER</div>      <div class="flex-item">        Flex-ITEM      </div>      <div class="flex-item">        Flex-ITEM      </div>      <div class="flex-item">        Flex-ITEM      </div>    </div>  </div>