Hey there, I could really use some help with my CSS layout,
I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout.
The issue I'm running into is how to stop long content inside a pre tag from pushing other divs.
Here's what it looks like before the long code content:
https://i.sstatic.net/eyg7N.png
And after the long code content:
https://i.sstatic.net/cGHI1.png
From the image, there are 2 problems that stand out:
- The left sidebar and right sidebar are being pushed by the main content
- The pre content should wrap in a scrollable way similar to StackOverflow
I was considering setting a max-width on the pre tag and using overflow: scroll, but how can I set the max-width based on the parent container? (the parent container is fluid)
Here's the link to the codepen:
https://codepen.io/cyberflyx/pen/VwaxNWp
<html>
<head>
<title>Learn Max Width</title>
</head>
<body>
<div class="flex justify-between">
<div class="left-sidebar bg-blue p-4">
<h3>This is Left Sidebar</h3>
</div>
<div class="main-content flex-1 bg-yellow p-4">
<div class="content-body">
<h3>Main Content</h3>
<p>This is long content between all of use</p>
<pre>
Sep 10 17:10:30 api-testapp-03 testapp.commands.generate_logs.run_test(): NOTICE: Got events:/home/m/app/testapp/queues/test.queue
</pre>
</div>
</div>
<div class="right-sidebar bg-red p-4">
<h3>This is Right Sidebar</h3>
</div>
</div>
</body>
</html>
CSS
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.left-sidebar {
}
.content-body {
}
.right-sidebar {
}
pre {
background-color: pink;
padding: 4px;
border-radius: 10px;
/* overflow: scroll; */
/* max-width: 500px; */
}
.flex-1 {
flex: 1 1 0%;
}
.p-4 {
padding: 4px;
}
.bg-blue {
background-color: blue;
}
.bg-yellow {
background-color: yellow;
}
.bg-red {
background-color: red;
}