Answers for "css fixed top and bottom div flexbox"

css flex bottom

You can use auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

So you can use one of these (or both):

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */
Show code snippet

Alternatively, you can make the element before the a grow to fill the available space:

p { flex-grow: 1; } /* Grow to fill available space */

flex box writing sideways text top to bottom

.outer{
  writing-mode: tb-rl;
  display:flex;
  align-items:center;
  justify-content: flex-end;
}
.inner{
  transform: rotate(180deg);
  transition: transform 1s ease-in-out;
}