Css for displaying whole content within a cointainer of 100vh and make overflow scrollable-CodePudding

I want exactly the general behaviour i have right now but it doesnt display the whole content of the tickets class. What do I need to do?

.toolbar {
  background-color: deeppink;
}

.tickets {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lime;
  font-size: 3em;
  word-break: break-word;
  overflow: auto;
}

.pagination {
  background-color: cyan;
}

.has-pagination {
  outline: 3px dotted black;
  height: 100%;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

<div >
  <div >
    Toolbar
  </div>
  <div >
    Crispy iceberg lettuce cool off edamame Italian linguine puttanesca chocolate peanut butter dip Thai sun pepper blueberries cocoa kale caesar salad spiced pumpkin chili cinnamon toast Italian pepperoncini picnic Malaysian grenadillo. Salted scotch bonnet
    pepper spring chocolate cookie cinnamon quinoa flatbread creamy cauliflower alfredo plums sweet potato falafel bites strawberries main course candy cane winter chilies garlic sriracha noodles. With sleepy morning tea soup lavender lemonade Sicilian
    pistachio pesto cool cucumbers kung pao pepper citrusy coconut milk grapefruit summertime casserole sriracha pecans delightful blueberry scones fruit smash tahini drizzle almonds pineapple salsa sesame soba noodles lentils Chinese five-spice powder.
    Bruschetta dark and stormy maple orange tempeh matcha grains hot cranberry spritzer green tea lime black beans lemon tahini dressing crumbled lentils ginger carrot spiced juice leek red curry tofu noodles veggie burgers. Toasted hazelnuts mediterranean
    mushroom risotto avocado golden cayenne pepper Thai basil curry sparkling pomegranate punch red grapes four-layer overflowing berries soy milk. Entree heat lemon lime minty ginger lemongrass agave green tea fiery fruit spicy almond milk chai latte
    pinch of yum apples samosa raspberry fizz macadamia nut cookies alfalfa sprouts cumin mint blueberry chia seed jam avocado basil pesto mocha chocolate zesty tofu pad thai Thai miso dressing appetizer green pepper ultra creamy avocado pesto bite sized
    cilantro. Mediterranean vegetables Indian spiced walnut mushroom tart hazelnut shiitake chickpea crust pizza seeds chocolate mint lime taco salsa cherry bomb pepper bananas hearty mediterranean luxury bowl miso turmeric glazed aubergine artichoke
    hearts eating together cilantro lime vinaigrette summer arugula salad vine tomatoes blood orange smash. Peanut butter chia seeds homemade balsamic paprika ginger tofu green onions Thai curry lime mango crisp cremini mushrooms chai tea lychee seasonal
    sweet potato black bean burrito shiitake mushrooms udon noodles lemon red lentil soup. Bento box simmer salad roasted brussel sprouts kimchi fig arugula cashew salad basmati burritos ultimate lemon sweet potato elderberry mangos balsamic vinaigrette
    sandwiches guacamole. Cauliflower soba noodles peanut butter crunch avocado dressing drizzle portobello mushrooms dill banana bread crispy cashew shaved almonds overflowing black bean wraps green grapes asian pear morning smoothie bowl. Pesto peach
    strawberry mango shallots edamame hummus vegan crunchy seaweed refreshing cucumber splash seitan ghost pepper figs hummus dark chocolate Mexican fiesta tabasco pepper blueberry pops walnut pesto tart salty açai fresh banana frosted gingerbread bites
    banh mi salad rolls. Couscous strawberry mango smoothie tofu strawberry spinach salad smoked tofu Bolivian rainbow pepper hummus falafel bowl chili cherries red amazon pepper basil winter potato summer fruit salad blackberries tasty black bean chili
    dip broccoli rich coconut cream roasted peanuts cool habanero golden instant pot raspberries Thai dragon pepper roasted butternut squash. Creamiest cherry dragon fruit lemonade zest kale enchiladas pasta butternut mix parsley hemp seeds second course
    chili pepper picnic salad coriander street style Thai basil tacos Southern Italian peppermint creamy cauliflower alfredo sauce green tea cozy butternut apricot cayenne muffins red pepper spiced peppermint blast. Almond milk lemongrass lingonberry
    oranges coconut peaches green papaya salad cozy cinnamon oatmeal farro platter red lentil curry Caribbean red habanero green bowl earl grey latte apple vinaigrette one bowl a delicious meal cherry bomb smoky maple tempeh glaze comforting pumpkin spice
    latte onion Thai super chili cookies tomato and basil hearts of palm pomegranate Bulgarian carrot pine nuts. Pumpkin dessert naga viper springtime strawberry vitamin glow orange coconut sugar lime tempeh jalapeño crunchy double dark chocolate.
  </div>
  <div >
    Pagination
  </div>
</div>

CodePen: https://codepen.io/t0nez/pen/MWBbyKo

CodePudding user response：

Use align-items: flex-start; on .tickets

.toolbar {
  background-color: deeppink;
}

.tickets {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: lime;
  font-size: 3em;
  word-break: break-word;
  overflow: auto;
}

.pagination {
  background-color: cyan;
}

.has-pagination {
  outline: 3px dotted black;
  height: 100%;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

<div >
  <div >
    Toolbar
  </div>
  <div >
    Crispy iceberg lettuce cool off edamame Italian linguine puttanesca chocolate peanut butter dip Thai sun pepper blueberries cocoa kale caesar salad spiced pumpkin chili cinnamon toast Italian pepperoncini picnic Malaysian grenadillo. Salted scotch bonnet
    pepper spring chocolate cookie cinnamon quinoa flatbread creamy cauliflower alfredo plums sweet potato falafel bites strawberries main course candy cane winter chilies garlic sriracha noodles. With sleepy morning tea soup lavender lemonade Sicilian
    pistachio pesto cool cucumbers kung pao pepper citrusy coconut milk grapefruit summertime casserole sriracha pecans delightful blueberry scones fruit smash tahini drizzle almonds pineapple salsa sesame soba noodles lentils Chinese five-spice powder.
    Bruschetta dark and stormy maple orange tempeh matcha grains hot cranberry spritzer green tea lime black beans lemon tahini dressing crumbled lentils ginger carrot spiced juice leek red curry tofu noodles veggie burgers. Toasted hazelnuts mediterranean
    mushroom risotto avocado golden cayenne pepper Thai basil curry sparkling pomegranate punch red grapes four-layer overflowing berries soy milk. Entree heat lemon lime minty ginger lemongrass agave green tea fiery fruit spicy almond milk chai latte
    pinch of yum apples samosa raspberry fizz macadamia nut cookies alfalfa sprouts cumin mint blueberry chia seed jam avocado basil pesto mocha chocolate zesty tofu pad thai Thai miso dressing appetizer green pepper ultra creamy avocado pesto bite sized
    cilantro. Mediterranean vegetables Indian spiced walnut mushroom tart hazelnut shiitake chickpea crust pizza seeds chocolate mint lime taco salsa cherry bomb pepper bananas hearty mediterranean luxury bowl miso turmeric glazed aubergine artichoke
    hearts eating together cilantro lime vinaigrette summer arugula salad vine tomatoes blood orange smash. Peanut butter chia seeds homemade balsamic paprika ginger tofu green onions Thai curry lime mango crisp cremini mushrooms chai tea lychee seasonal
    sweet potato black bean burrito shiitake mushrooms udon noodles lemon red lentil soup. Bento box simmer salad roasted brussel sprouts kimchi fig arugula cashew salad basmati burritos ultimate lemon sweet potato elderberry mangos balsamic vinaigrette
    sandwiches guacamole. Cauliflower soba noodles peanut butter crunch avocado dressing drizzle portobello mushrooms dill banana bread crispy cashew shaved almonds overflowing black bean wraps green grapes asian pear morning smoothie bowl. Pesto peach
    strawberry mango shallots edamame hummus vegan crunchy seaweed refreshing cucumber splash seitan ghost pepper figs hummus dark chocolate Mexican fiesta tabasco pepper blueberry pops walnut pesto tart salty açai fresh banana frosted gingerbread bites
    banh mi salad rolls. Couscous strawberry mango smoothie tofu strawberry spinach salad smoked tofu Bolivian rainbow pepper hummus falafel bowl chili cherries red amazon pepper basil winter potato summer fruit salad blackberries tasty black bean chili
    dip broccoli rich coconut cream roasted peanuts cool habanero golden instant pot raspberries Thai dragon pepper roasted butternut squash. Creamiest cherry dragon fruit lemonade zest kale enchiladas pasta butternut mix parsley hemp seeds second course
    chili pepper picnic salad coriander street style Thai basil tacos Southern Italian peppermint creamy cauliflower alfredo sauce green tea cozy butternut apricot cayenne muffins red pepper spiced peppermint blast. Almond milk lemongrass lingonberry
    oranges coconut peaches green papaya salad cozy cinnamon oatmeal farro platter red lentil curry Caribbean red habanero green bowl earl grey latte apple vinaigrette one bowl a delicious meal cherry bomb smoky maple tempeh glaze comforting pumpkin spice
    latte onion Thai super chili cookies tomato and basil hearts of palm pomegranate Bulgarian carrot pine nuts. Pumpkin dessert naga viper springtime strawberry vitamin glow orange coconut sugar lime tempeh jalapeño crunchy double dark chocolate.
  </div>
  <div >
    Pagination
  </div>
</div>