Question:
There is a 200px high block. It has text. The text is always pressed to the bottom of the block. But if there is a lot of text and it does not fit in 200px, a scroll appears. How to do this? (block height may vary)
Answer:
Add overflow-y: auto :
* { box-sizing: border-box; } .box { height: 200px; border: 1px solid; overflow-y: auto; display: flex; flex-flow: column nowrap; } .box p { margin-top: auto; }
<div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, alias. </p> </div> <br> <br> <div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aperiam id est perferendis, excepturi necessitatibus fugiat quam. A fugiat reprehenderit, totam animi rem facilis obcaecati doloremque magnam omnis est quas saepe libero at, dolor nam sequi. Temporibus at, tempore officiis numquam quos quo distinctio natus quisquam mollitia ad eum repellendus. <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aperiam id est perferendis, excepturi necessitatibus fugiat quam. A fugiat reprehenderit, totam animi rem facilis obcaecati doloremque magnam omnis est quas saepe libero at, dolor nam sequi. Temporibus at, tempore officiis numquam quos quo distinctio natus quisquam mollitia ad eum repellendus. </p> </div>