周囲のdivが消えてdivが消えてしまいます

Question

入力ボックスに入力するときに、入力からの文字列一致をIDで調べ、ある時点で文字列が一致しない場合は、その特定のdivはnoneを表示するように設定されます。

<div id="veryOuterContainer"> 
<div id="rowOfDivs"> 
    <div class="pics" id="BusterPosey"><p>This is a first test of the search</p></div> 
    <div class="pics" id="FrankGore"><p>This is a second test of the search</p></div> 
    <div class="pics" id="BrandonBelt"><p>This is a third test of the search</p></div> 
    <div class="pics" id="DraymondGreen"><p>This is a fourth test of the search</p></div> 
    <div class="pics" id="NavarroBowman"><p>This is a fifth test of the search</p></div> 
</div> 
<div id="rowOfDivs"> 
    <div class="pics" id="BusterPosey"><p>This is a first test of the search</p></div> 
    <div class="pics" id="FrankGore"><p>This is a second test of the search</p></div> 
    <div class="pics" id="BrandonBelt"><p>This is a third test of the search</p></div> 
    <div class="pics" id="DraymondGreen"><p>This is a fourth test of the search</p></div> 
    <div class="pics" id="NavarroBowman"><p>This is a fifth test of the search</p></div> 
</div> 
</div> 

私はdiv要素がうまく消えて取得することができ、それらは全て素晴らしく、スタイルに滞在....しかし、彼らは同じ行にとどまる：すべては私のマークアップの例です。ここでは除いて、良いつもりでした彼らは始まった。私は「バスター・ポージー」の文字列の一致があった場合たとえば、それは次のようになります。

This is a first test of the search 
This is a first test of the search 

しかし、私はそれは次のようになりたい：

This is a first test of the search This is a first test of the search 

そして私はちょうど」することができます異なる行の個々のdivを同じ行に整列させる方法を理解しています（最大幅に達すると折り返します）。

私は次のことを試してみました：

#veryOuterContainer { 
    display:inline-block; 
} 

これは何もしませんでした。
私も試してみました：同じ行のすべてのマッチした個々のdivをレンダリングし、それらの両方

#veryOuterContainer { 
    display: inline-flex; 
} 

、となるように、私は、約150のdivを扱っています：

#veryOuterContainer { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 

とをあなたは想像することができます、彼らは一緒にscrunchedそれらのいずれかを作ることは不可能になりました。

Answer 1

その行に表示されない理由は、他の下位親を子要素を制御するため、フレックスの表示にする必要があるためです。以下の例：

#veryOuterContainer #rowOfDivs { 
    display: flex; 
}