I am creating a tournmanet bracket with vue, and I am using this code as start point: https://codepen.io/aronduby/pen/qliuj but I am using a v-for for generating the brackets
<ul v-for="j in jTotal>
<div v-for="i in iTotal"
v-if="!loading && matriz[j-1][i-1]"
class="test"
>
<li class="spacer"> </li>
<li class="game game-top winner">person 1 <span>79</span></li>
<li class="game game-spacer" > </li>
<li class="game game-bottom ">person 2 <span>48</span></li>
<li class="spacer"> </li>
</div>
</ul>
But as I have this div wrapping the li, I lost the flex-grow property that is being used in the example because I generate the structure
<ul>
<div>
<li>
So I would like to know if there is how I keep the property grow wrapping the 5 li that make up a game.
Thanks