scroll to see pre tags content-CodePudding

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 >
  <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>

CodePudding user response：

you dont need position:absolute in this case because postion absolute takes the element out of html flow. i just removed the position absolute and gave parent overflow-Y: scroll; if you want to push the pre to the bottom you have to use position:relative and push from the top like top:500px; meaning push 500px from the top

  .wrapper {
        position: relative;
        height: 90vh;
        width: 50vw;
        overflow-Y: scroll;
        background-color: salmon;
    }

    .wrapper pre {
        display: flex;
        position: relative;
        top: 500px;
        margin-bottom: 10px;
        padding: 10px;
        color: #ffffff;
        background-color: sandybrown;
    }

<div >
  <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>

CodePudding user response：

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 >
  <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>