ul li の入れ子css flexboxで実現したい

Question

前提・実現したいこと

search&filterProの検索フォームのデザインについて、flexboxレイアウトでドロップダウンフォームやチェックボックスなどの部品をキレイに整列させたい。

該当のソースコード

<form class="searchandfilter">
 <ul>
  <li class="sf-field-taxonomy-AAA"></li>
  <li class="sf-field-taxonomy-BBB"></li>
  <li class="sf-field-taxonomy-CCC"></li>
  <li class="sf-field-taxonomy-DDD"></li>
  <li class="sf-field-taxonomy-EEE"></li>
  <li class="sf-field-taxonomy-FFF"></li>
  <li class="sf-field-post-meta-GGG">
   <ul data-operator="and">
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
   </ul>
  </li>
  <li class="sf-field-post-meta-HHH">
   <ul data-operator="and">
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
    <li class="sf-level-0 "></li>
   </ul>
  </li>
  <li class="sf-field-submit"></li>
  <li class="sf-field-reset"></li>
 </ul>
</form>

.searchandfilter {
 width: 100%;
}
.searchandfilter ul {/*１階層の ul*/
	display: flex!important;
	margin: 0px!important;
	padding: 0!important;
	list-style: none;
 flex-wrap: wrap; /* 折り返し */
}
.searchandfilter ul li {/*１階層の li*/
 padding: 10px!important;
 flex-wrap: wrap;
}
.sf-level-0{
flex-grow: 1; /* flexコンテナ内の余白の分配比率を指定 */ 
}
.searchandfilter ul li ul{
 padding: 0!important;
 display: flex!important;
 flex-wrap: wrap; /* 折り返し */
}
.searchandfilter ul li ul li {
 padding-left: 0!important;
 padding-bottom: 0!important;
}

上記の状態だと

sf-field-post-meta-GGG
sf-field-post-meta-HHH
は、キレイに配列できているが、
親要素のulのliのsf-field-taxonomy-AAA～FFFのドロップダウンはflexが効いてくれないです。

入れ子のcssの設定にお詳しい方ご教授頂けないでしょうか？
そもそも入れ子のflexレイアウトはできないのでしょうか？

Answer 1

とりあえず、.searchandfilter ul {/*１階層の ul*/ と書いていますが、これは「.searchandfilterの子孫要素の中の全てのul」に適用されます。
「.searchandfilterの直下の子のul」は.searchandfilter > ul になります。

Comments

[takako]

はじめまして。ありがとうございます。
.searchandfilter > ul
.searchandfilter > ul > li

.searchandfilter > ul > li > ul
.searchandfilter > ul > li > ul > li

としてみましたが、
.searchandfilter > ul > li > ul　に設定したflexコンテナは、ul内でli要素が均等に配列してくれていますが、
.searchandfilter > ul　のほうは、横並びはしますが、均等に配列されません。

[kei344]

修正したコードを質問文に「追記」してください。（決して元のコードを消さないでください）
また、flexは「均等」にするための物ではないので、そうならないこともあります。（幅が違う物も並べることが出来ます）

[takako]

ご指摘ありがとうございます。
下記のようにしてみました。

liの要素を33.3%で均等に配置したいと考えていますが、1階層目のliに33.3%を記述すると、２階層目のulが33.3%の横幅になってしまいます。

.searchandfilter {
width: 100%;

}
.searchandfilter > ul {/*１階層の ul*/
display: flex!important;
margin: 0px!important;
padding: 0!important;
list-style: none;
flex-wrap: wrap; /* 折り返し */
justify-content: flex-start;
}

.searchandfilter > ul > li {/*１階層の li*/
padding: 10px!important;
flex-wrap: wrap;
}

.sf-level-0{
flex-grow: 1; /* flexコンテナ内の余白の分配比率を指定 */
}

.searchandfilter > ul > li > ul{/*2階層の ul*/
padding: 0!important;
display: flex!important;
flex-wrap: wrap; /* 折り返し */
}

.searchandfilter > ul > li > ul > li {/*2階層の li*/
padding: 5px!important;
}

[kei344]

コメントではマークダウンが使えない上、他の回答者にも伝わりにくいので、質問文に追記することをお勧めします。

> ２階層目のulが33.3%の横幅になってしまいます。
提示されたコードではなりませんよ。「!important」を多用しているところを見ると、他のコードがあるのでは？また、「!important」は使わずにコーディングするようにしないと、「!important」だらけのコードになりますよ。
https://jsfiddle.net/0owqv16c/1/