Flex wrap and overflow on both column and row

0 votes

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;
Jun 13 in CSS by Edureka
• 8,060 points
24 views

1 answer to this question.

0 votes

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>
answered Jun 13 by Edureka
• 9,540 points

Related Questions In CSS

0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

I've been playing with fully responsive layouts ...READ MORE

3 days ago in CSS by Edureka
• 8,060 points
5 views
0 votes
1 answer

Difference between static and relative positioning

Static: The location of items is static ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
12 views
0 votes
1 answer

Setting top and left CSS attributes

You can alternatively use the setProperty method, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
9 views
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
15 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

So, if you've arrived at this question ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
67 views
0 votes
1 answer

What does flex: 1 mean?

If an element has flex: 1, it ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
7 views
0 votes
1 answer

Controlling the amount of space in justify-content: space-between

The justify-content property positions flex items on ...READ MORE

answered 5 days ago in CSS by Edureka
• 9,540 points
12 views
0 votes
1 answer

Best way to center a <div> on a page vertically and horizontally?

The legitimate way to do that irrespective ...READ MORE

answered 5 days ago in CSS by Edureka
• 9,540 points
7 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

For controlling "cellpadding" in CSS, you can ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
9 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP