Text truncate with percentage width in parent container

I have 4 columns each having 25% width. It keeps the column width as expected when I want to add a long text without truncating. However, truncating suddenly increases all of the columns' length. The followings fix the problem:

• using grid layout instead of flex-row (But I want to keep the num. of columns dynamic)
• removing the top-most container's flexbox property (But it breaks the other part of the design)

Any solution or explanation of the root cause would be much appreciated.

Here is the html with tailwind-css

JSFiddle

<div class="h-screen flex flex-row"><div class="w-15 flex items-center -rotate-90">    Sidebar</div><div class="flex flex-col flex-1">  <div class="flex mx-auto items-center h-14">      Header</div><div class="flex flex-1 flex-row ">    <div class="w-1/4 bg-blue-200 truncate">        When this text is too long to fit in the container, it truncates but column lengths are iincreased with the text length and columns don't fit to the screen. Removing the truncate class also fixes the problem.</div><div class="w-1/4 bg-red-200">      Second Column</div><div class="w-1/4 bg-green-200">      Third Column</div><div class="w-1/4 bg-orange-200">      Fourth Column</div></div></div></div>