<pre> tag is not adapting the column width in bootstrap

[thelovekesh]

I am using Bootstrap 5 to style my page. When I am using the <pre>...</pre> tag inside the class="col" then it is not adapting the width of the column instead of that it is increasing the width of the whole column. But when I am using the class="col-lg-8" it is working fine.

HTML CODE

<div class="col">
    <pre>
          <code>
             ...
          </code>
    </pre>
</div>

With <pre> tag and class="col"

With <pre> tag and class="col-lg-8"

Without <pre> tag

[thelovekesh]

Check it live here
https://thelovekesh.github.io/cbtheme-debug/blog/

[alpadev]

This is somewhat expected. See https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size#answers-header

[dvmuccillo]

Hi @thelovekesh ,
i solved this problem on a couple of pages using
white-space: pre-wrap;, and it seems to work on
your page (tested with Chrome DevTools).