如何实现Flex容器垂直方向内容溢出时自动换行且无垂直滚动条（类似水平方向效果）？

Great question! Let's break down what's happening with your current Flex setup and fix it to get that vertical wrapping behavior you want—mirroring how horizontal line breaks work, no vertical scroll, and no annoying bottom gaps.

What's Wrong With Your Current Code? #

When you use flex-direction: column + flex-wrap: wrap, your Flex container's main axis is vertical. Elements stack top-to-bottom until they hit the container's height limit, then wrap horizontally into new columns. The bottom gap you're seeing happens because:

• Your container has a fixed height (calc(100% - 0.125rem))
• align-content: flex-start aligns columns to the left, but elements only take up as much vertical space as they need—leaving empty space below if the container is taller than the total height of elements in the first column.

Solution 1: Use Grid Layout (Cleanest & Most Flexible) #

Grid is purpose-built for this kind of auto-filling column/row behavior, and it eliminates the gap issue entirely. Replace your Flex container styles with these Grid rules:

.flex-container {
  height: calc(100% - 0.125rem);
  display: grid;
  /* Auto-create rows matching your item's height + top margin */
  grid-template-rows: repeat(auto-fill, calc(6.25rem + 1px));
  /* Stack items vertically, wrap to new columns when container height is full */
  grid-auto-flow: column;
  /* Add gap between columns (matches your original item margin-left) */
  grid-column-gap: 1px;
  overflow: hidden;
  /* Center items inside their grid cells */
  place-items: center;
}

.item {
  width: 6.25rem;
  height: 6.25rem;
  /* Remove margin—we're using grid-gap for spacing now */
  /* margin: 1px 0 0 1px; */
  font-size: 2.25rem;
  line-height: 6.25rem;
  background-color: rgb(225, 225, 225);
}

This setup will:

• Fill vertical rows until the container's height is maxed out
• Automatically wrap overflowing items into new columns
• Eliminate any bottom gaps since rows fit perfectly into the container's height

Solution 2: Adjust Flex Layout With JS (If You Need to Keep Flex) #

If you have to stick with Flex, you can dynamically adjust the container's height to fit an exact number of items, removing the bottom gap. Add this JavaScript alongside your existing CSS:

const container = document.querySelector('.flex-container');
const items = document.querySelectorAll('.item');

if (items.length) {
  // Calculate total height per item (including margin-top)
  const itemTotalHeight = items[0].offsetHeight + parseInt(getComputedStyle(items[0]).marginTop);
  // Find how many items fit vertically in the container
  const maxRows = Math.floor(container.offsetHeight / itemTotalHeight);
  // Set container height to fit exactly that number of items
  container.style.height = `${maxRows * itemTotalHeight}px`;
}

Your original CSS stays mostly the same—this JS just ensures the container height matches the total height of a full column of items, so no gap is left.

Either solution will give you the vertical wrapping behavior you want, with no vertical scroll and no bottom gaps—just like horizontal line breaks work!

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