Flex wrap and overflow on both column and row

Question

I'm attempting to design a resizable flex box that can only hold so much information. I want the inner elements to be horizontally stacked.

Flex objects should expand horizontally until they reach their full width and wrap around themselves. It will wrap to the next line when the width is reduced. When I resize so that the height is insufficient, however, I want the items to entirely overflow. It's partially inside the structure. How do I wrap it for height as well? I've written the following for wrapping it for width.

 display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  background-color: green;

  overflow: hidden;

Edureka · Answer 1 · Jun 13, 2022

Here's a workaround, but it comes with some drawbacks that may not be precisely what you're looking for. Consider the following snippets:

.container {
  background: #008000;
  border: 5px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 5px;
  height: 120px;
  max-width: 160px;
  resize: vertical;
  gap: 5px;
  overflow: hidden;
}

.container>div {
  height: 50px;
  width: 50px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 25px;
}

<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>