As I'm working on formatting a diff in the browser, I have a parent div container and each line of the diff file is displayed within a pre tag.
The pre tags are set to display one per line, with the ability to scroll horizontally if they expand beyond 100% of the parent container's width.
While this setup works well, there seems to be a minor issue where only the pre tag that exceeds 100% width has its full length shown, while the others stop at that limit. Is there a way to ensure consistent widths for all pre tags, regardless of whether they exceed 100%?
If possible, I would prefer a solution using just HTML and CSS. However, I am open to a jQuery solution if it simplifies the process.
.diff-wrapper {
border: 1px solid #d2d2d2;
margin:20px;
overflow-x: scroll;
position: relative;
}
.diff-wrapper pre {
background:transparent;
border:0;
border-bottom:1px solid #eee;
border-radius:0;
display: inline-block;
height:28px;
line-height:28px;
margin:0;
min-width:100%;
overflow: visible;
padding:0;
padding-left:10px;
padding-right:10px;
position: relative;
white-space: pre;
word-wrap:normal;
}
.diff-wrapper pre.added {
background-color:#ddffdd;
}
.diff-wrapper pre.removed {
background-color:#fee8e9;
}<div class="diff-wrapper">
<pre>+ some short text here</pre>
<pre>+ some short text here</pre>
<pre class="added">+ some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text here</pre>
<pre>+ some short text here</pre>
<pre class="removed">+ some short text here</pre>
<pre class="removed">+ some short text here</pre>
</div>