-2

I try to create a template for something like a chat. I want to display the text at the bottom of the div, why i use flex and flex-end for the child parent. But then as soon i do this my scroll function breaks.

https://jsfiddle.net/e1n7pc42/1/

i heard my jsfiddle is not working, so here my code:


<div class="header">
  <div class="output">
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
  </div>   
</div>


<div class="main"></div>



.header {
  background-color: yellow;
  height: 70vh;
  overflow-y: scroll;
  display: flex;
}

.output {
    align-self: flex-end;
}

.main {
  background-color: orange;
  height: 20vh;
}
thedoomer1000
  • 73
  • 6
  • related to understand why: https://stackoverflow.com/a/49279237/8620333 – Temani Afif Aug 13 '20 at 09:52
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Aug 13 '20 at 09:57
  • delete align-self: flex-end; – s.kuznetsov Aug 13 '20 at 10:00
  • 1
    Im sorry my fiddle isnt working, so i included the code in the OP. – thedoomer1000 Aug 13 '20 at 10:15
  • Deleting align-self: flex-end; does make my text start from the top not from the bottom which i want.. – thedoomer1000 Aug 13 '20 at 10:20
  • Why do i get downvotes, i tried a lot and made a jsfiddle and even pastet my code now in here whats wrong here? I would be happy if people would tell me what im doing wrong so i can prevent it next time.. – thedoomer1000 Aug 13 '20 at 10:21

1 Answers1

0

Adding margin-top: auto; will help here.

.header {
  background-color: yellow;
  height: 70vh;
  overflow-y: scroll;
  display: flex;

}

.output {
    align-self: flex-end;
    margin-top: auto;

}

.main {
  background-color: orange;
  height: 20vh;
}§
<div class="header">
  <div class="output">
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
      <span> <p>Hello World! </p> </span>
  </div>   
</div>


<div class="main"></div>
DevAlp12
  • 30
  • 5