dangerouslySetInnerHTML stretches / expands / grows the page display

Question

In my NextJs app, I am accessing CosmicJs, a headless CMS with content to display on my page.

I have 3 columns on the page, with the content from the CMS displayed in the 2nd column.

What is happening is the 2nd column is expanding shrinking the width of the 1st and 3rd coluns.

How can I prevent this from happening and prevent the expansion of the 2nd column?

I have tried flex-grow-0, grow-o on the div and parent attributes but nothing works.

Here is the code:

<div className="w-1/2 items-center border-2 border-primary flex-grow-0">
                <div className="flex-grow-0 grow-0" dangerouslySetInnerHTML={{ __html: post?.metadata.content }}/>
            </div>

Thanks is advance for your assistance.

Answer 1

ok, I finally fiured out the issue.

I recently upgraded to NextJS 13 and doing so, the tailwind.config.js was not updated to include the /app directory. Tailwind continued to use my custom settings and colors, but the default tailwind colors and spacing were not recognized. I had 3 grid cols defined on my page with the blog content going in the middle column and was never able to adjust the grid column width.

I updated the tailwind.config.js to include the new /app directory, then things worked fine.

  content: ['./pages/**/*.{js,ts,jsx,tsx}', 
  './components/**/*.{js,ts,jsx,tsx}',
  './app/**/*.{js,ts,jsx,tsx}',
  ],