I have a pre tag inside a wrapper div. I have a bunch of text content inside the pre tag. What I want is once the pre tags height is taller than the wrapper I want to scroll to see the hidden text content inside the pre tag. How can I achieve this? Thanks in advance.
.wrapper {
position: relative;
width: 50vw;
height: 90vh;
overflow-y: auto;
background-color: salmon;
}
.wrapper pre {
display: flex;
position: absolute;
bottom: 0%;
width: 100%;
margin-bottom: 10px;
padding: 10px;
color: #ffffff;
background-color: sandybrown;
}
<div class="wrapper">
<pre>
blah
blah
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
</pre>
</div>
>Solution :
Will this work for you?
.wrapper {
position: relative;
width: 50vw;
height: 90vh;
overflow-x: hidden;
overflow-y: auto;
background-color: salmon;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.wrapper pre {
padding: 10px;
color: #ffffff;
overflow: auto;
background-color: sandybrown;
}
<div class="wrapper">
<pre>
blah
blah
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
check
test
</pre>
</div>