I am facing an issue with a card on my webpage. It contains a pre tag inside it, which is causing the size of the card to extend beyond its container, resulting in a horizontal scroll bar appearing. How can I make the content within the pre tag scroll horizontally if it exceeds the size of the card? Similar to how code snippets work on Stack Overflow answers, where they have a scroll bar within the snippet itself to prevent horizontal overflow.
Below is the CSS code:
.main {
width: 100%;
background-color: green;
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu {
width: 200px;
height: 300px;
background-color: red;
flex-grow: 0;
flex-shrink: 0;
}
.card-container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: blue;
height: 500px;
display: flex;
flex: 1;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.card {
position: relative;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
margin: 20px;
background-color: yellow;
max-width: auto; height: 300px;
}
pre {
background-color: black;
color: white;
overflow: scroll;
}
And here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flex-style.css">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="menu"></div>
<div class="card-container">
<div class="card">
<h1 class="heading">Heading</h1>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quaerat earum cum dolore saepe eius dignissimos porro, natus ut omnis maiores deleniti repudiandae distinctio quod? Vero tempore laboriosam maxime quidem accusantium ea qui enim doloremque? Maxime accusantium fuga inventore veniam vero quaerat possimus, id magni consectetur, omnis obcaecati recusandae ipsam.
</p>
<pre>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa placeat quia cum, corporis amet quas repellat, nostrum inventore numquam accusamus possimus minima maxime error iusto obcaecati consequuntur fugiat magnam. Temporibus?
</pre>
</div>
</div>
</div>
</body>
</html>
Any assistance on this matter would be highly appreciated.