scroll to see pre tags content

September 13, 2022

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>