Currently, I am diligently working on an intricate DASHBOARD utilizing bootstrap-4. A peculiar issue arose with the implementation of <pre> within a Flexbox. However, upon closer inspection, it became evident that this was not a flexbox or <pre> related problem, but rather an issue with the containing table. The structure of my html should follow this pattern:
table-container
flex-container
pre-containerHere is a snippet of the html and css code:
.container-example{
background-color: rgba(0, 0, 255, 0.30);
display: table;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 45px;
position: absolute;
top: 0;
width: 100%;
}
/* Additional CSS Styles */
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>
<div class="container-example">
<div class="code-example-body">
<div class="normal-div">Lorem Ipsum...</div>
<div class="code-example">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"> <!-- HTML Code goes here --> </code></pre>
</figure>
</div>
</div>
<div class="long-div"></div>
<div class="footer">
I'm footer. Please set me bottom of the browser or end of the document.
</div>
</div>If I modify or eliminate display: table; from .container-example, the issue gets resolved. Another workaround is setting a fixed width in .code-example:
.code-example{
flex: 0 0 400px;
max-width: 400px;
}Note: It is imperative to retain
display: table;in the parent element and maintainwidthas100%.
I have a fixed positioned footer at the bottom which needs to stay at the end of the document or browser. Therefore, removing or replacing display: table; is out of question.
The only feasible solution involves implementing a horizontal scroll bar for
pre.