'How to make html pre flexible?

I have this html:

<html>
<div style="display: flex;">
    <pre>Left side long test..</pre>
    <div style="min-width: 1200px; background-color:red;">aaa</div>
</div>
</html>
  • When window will get smaller width, div with 1200px stretch over the flexbox div and not pre get thinner, why?
  • How can I make pre width flexible?
htmlcsspre


Solution 1:[1]

The way you will give them space and stretch is basically just giving them space because that tag is a preformatted text. Like below and you can also give them a letter spacing to make it more flexible and give it a vw give it a more flexibility. You can call it on media query to adjust what ever you want as well. Hope this helps

pre {letter-spacing:2vw;}

@media only screen and (max-width:768px) {
pre {letter-spacing:0vw;}
}
<pre>L  e  f  t s  i  d  e long test..</pre>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions