How to make html pre flexible?

user_239219 0
Viewed 38

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?
pre css html
1 Answers

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>

user_165130010
Related