CSS Width not working but max and min width does

I have a side navigation with a header and a middle section. EG

<div>
    <aside></aside>
    <div>
        <header></header>
        <div class="middle"></div>
    </div>
</div>

My aside has a fixed width on EG 300px but on certain screens, the width is being ignored. The header and middle grow using flex to 100% width and the header has a fixed hight of 60px.

First one I found was display: table, anything with this on cause the navigation to be smaller and squashed all the nav items. I fixed this because I dont actually need the display: table (flexbox works fine)

The second issue which I cannot figure out is when using pre. Why does the pre break the navigation width? I can fix this by changing the navigation to the follow but I dont understand why.

min-width: 300px;
max-width: 300px;
width: 100%;

Does anyone know why and is there a better way?

Thanks in advance

PS I have bootstrap and tailwind applied which maybe causing issues. Tailwind classes are prefixed as to not clash with bootstrap