'Flex wrap and overflow on both column and row

I am trying to create a resizable flex box that can only accommodate as much detail as it could. I want the inner items to be stacked horizontally.

Flex items should grow horizontally until width and wrap itself:

Flex should grow row direction

When reducing the width, it will wrap to the next line:

enter image description here

But when I resize so that the height is not sufficient, I want the items to over flow completely. Unlike in this image here, it's partially inside.

enter image description here

I have written the below for wrapping it for width, how do I do it for height as well?

 display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  background-color: green;

  overflow: hidden;
cssflexboxoverflowcss-grid


Solution 1:[1]

If you have a resizable container using the resize property then it will not be able to overflow like you want to because it's not compatible with overflow: visible;

The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

.container {
  background: #008000;
  border: 5px solid black;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  height: 120px;
  width: 160px;
  resize: both;
  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>

Here's a workaround, but some tradeoffs that might not be exactly what you are looking for. Check the 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions