Tailwind w-full fails with flexbox?

I'm debugging some style issues with my react website and simplified down my CSS code:

<div style= {{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}><div><div className="w-full h-full"><div className="flex flex-col border rounded bg-black relative">                    asdofijdsdfij</div ></div></div></div>

I don't understand why the component is not expanding to full width. The third div specifies "w-full". If i remove one of the outer two divs, I can achieve the result that I want. It also works if I switch to basic css style like style={{width:"500px"}} instead of "w-full".

I need all the divs, this is just a simplified example. Can someone explain why this doesn't work and how to fix it?