如何使Vue for循环生成的按钮覆盖div的整个区域？

Question

我正在尝试生成带有Vue for循环的按钮，该按钮将拉伸div的整个宽度。

我的模板如下所示：

<div id="nonav" style="width: 100%; margin-right: 0px; margin-top: 100px">
                <button v-for="(val, key) in convertedCategories" :key="key"  @click="selectCategory(val, key)" v-if="Object.keys(selectedCategory).length===0  && searchText=='' && Object.keys(selectedSubcategory).length===0"
                    :style="{ width: $el.clientWidth/4 + 'px',
                        height: $el.clientHeight/4 + 'px',  
                        'padding-top': '30px',

                        display: 'inline-block'}"
                    class="tiles"           
                >
                <div v-if="val['icon']"><icon :name="val['icon']" scale="4" color="rgb(234, 34, 45)"></icon></div>
                <span><p style="font-size: 18px">{{ val['.key'].toUpperCase() }}</p></span>
                </button>
                <button v-for="(subval, subkey) in subcats(selectedCategory)" v-if="Object.keys(selectedCategory).length>0 && Object.keys(selectedSubcategory).length===0  && searchText=='' && subval['.key'] !== 'icon'" :key="subkey" @click="selectSubcategory(subval, subkey)"
                    :style="{ 
                        width: $el.clientWidth/4 + 'px',
                        height: $el.clientHeight/4 + 'px',

                        'padding-top': '30px',


                        display: 'inline-block'}"
                    class="tiles"       
                >
                <span v-if="subval['icon']"><icon :name="selectedCategory['icon']" scale="4" color="rgb(234, 34, 45)"></icon></span>
                <p style="font-size: 18px">{{ subkey.toUpperCase() }}</p>
                </button>
            </div>

如您所见，我正在尝试通过父div的宽度除以4来定义宽度，因此每行将有4个按钮。 问题是，尽管按钮似乎响应很快，但是它们并不能填满整个宽度---在调整窗口大小时还剩下一些间隙。 如果按钮始终是窗口宽度的四分之一，怎么办？

（要澄清一下：在调整大小时，我可以关闭窗口足够多的时间，以使按钮按其应有的方式填充div，但更多的话，按钮将堆叠在彼此的顶部，并在左右两侧留出填充物）

Answer 1

首先，删除按钮的内联样式。 其次，在需要CSS帮助时始终提供JSfiddle

#nonav {
    display: flex;
    align-items: stretch;
    justify-content: center
}
#nonav button.tules {
   flex: 1;
   width: auto;
}