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

Question

I'm trying to generate buttons with a Vue for-loop that will stretch the entire width of a div.

My template looks like this:

<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>

As you can see, I'm trying to define the width by the parent div's width divided by 4, so there will be 4 buttons per row. The problem is, although the buttons seem responsive, they do not fill the entire width --- there is some gap that is left while I resize the window. How can this be the case if the buttons are always a quarter of the window width?

(To clarify: while I'm resizing, I can close the window enough so that the buttons fill the div as they should, but any more and the buttons will stack on top of each other and leave padding on the left and right)

Answer 1

First Remove the button inline style. Second always provide JSfiddle when you need CSS help

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