如何保持现有布局行为，让100vh容器内tickets类内容完整显示？

问题描述 #

我希望保留当前页面的整体布局行为，但目前.tickets类容器的内容无法完整展示。当前已设置body高度为100vh，.has-pagination容器采用Flex垂直布局，.tickets类已添加overflow:auto属性，但仍无法显示全部内容，请问需要调整哪些CSS样式？

现有代码：

.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 class="has-pagination">
  <div class="toolbar">
    Toolbar
  </div>
  <div class="tickets">
    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 class="pagination">
    Pagination
  </div>
</div>

调整方案 #

问题根源是Flex垂直布局中，.tickets默认会随内容拉伸高度，导致overflow:auto无法触发滚动（容器高度未被限制）。只需修改两处CSS：

1. 给.has-pagination明确设置高度为100vh，确保它严格占满视口高度：

.has-pagination {
  outline: 3px dotted black;
  height: 100vh; /* 修改此处 */
  background-color: grey;
  display: flex;
  flex-direction: column;
}

2. 给.tickets添加flex: 1，让它占据.toolbar和.pagination之外的剩余空间，同时限制自身高度：

.tickets {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lime;
  font-size: 3em;
  word-break: break-word;
  overflow: auto;
  flex: 1; /* 添加此处 */
}

原理说明 #

• flex:1等价于flex-grow:1; flex-shrink:1; flex-basis:0%，会让.tickets在垂直Flex容器中自动填充剩余空间，且不会被内容无限撑开。
• 当.tickets高度被限制在剩余空间内，内容超出时overflow:auto会自动显示滚动条，既保证内容完整展示，又保留原有的居中布局和整体结构。

内容的提问来源于stack exchange，提问作者t0ne7