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, 2022 in CSS by Edureka
• 13,620 points
4,403 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, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

CSS Display: Flex on Desktop and Mobile

I'm newer to using FLEXBOX and have ...READ MORE

Jul 18, 2022 in CSS by Edureka
• 13,620 points
390 views
0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

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

Jun 30, 2022 in CSS by Edureka
• 13,620 points
359 views
0 votes
1 answer

Table with table-layout: fixed; and how to make one column wider

The table-layout CSS property specifies the algorithm ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
1,701 views
0 votes
0 answers

How do I center a list of text and then justify it in a w3.css column?

I am unable to center the contact ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
385 views
0 votes
1 answer

CSS-only masonry layout

A masonry feature is included in CSS ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
867 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, 2022 in CSS by Edureka
• 12,690 points
1,353 views
0 votes
1 answer

CSS text-overflow: ellipsis; not working?

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
3,941 views
0 votes
1 answer

What does flex: 1 mean?

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

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
13,823 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 Jun 28, 2022 in CSS by Edureka
• 12,690 points
330 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

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

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