Question 161251 in Html Question posted in
Some basic documentation can be found here.

How do I manage overflowing children divs inside parent divs?

Part of my code is creating something that is similar to when you’re composing an email in gmail or outlook. There is a search bar, you can choose the people who should receive the email, then the chosen people get collected in the search bar. Here’s how it looks like when you haven’t selected any recipients yet:

enter image description here

When you start selecting recipients, this is how it looks like (each of those recipients are stored in their own divs):

enter image description here

which looks fine. however at a certain point when i start selecting more recipients, things start getting crowded and cramped:
enter image description here
enter image description here

Ideally what I want to happen is for the main div to have a fixed width, and when the recipients start to crowd up, the next recipients should go on the next line, which means that the main div also gets bigger in height to accommodate the content. Something like how gmail does it:
enter image description here
Notice how there could be just one person per row if their email is too long, or up to three if their emails are shorter.

Tags:

2

Answers


  1. 0

    You can use css flexbox wrap for this.

    .container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}
    <div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>

    In this example, we have a container with five items inside. The container has a display: flex property to enable flexbox layout, and a flex-wrap: wrap property to wrap the items to a second row when there isn’t enough space.

    Each item has a fixed width and height, and some margin and border for visualization purposes.

    You can adjust the width, height, and margin of the items to fit your needs.

    Login or Signup to reply.
  2. 0

    If you use CSS Flex, this is really simple, see below. I highly recommend this page for leaning more about Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    #container {
  display: flex;
  flex-wrap: wrap;
  
  border: 1px solid #000;
  padding: 5px;
  width: 300px;
}

.item {
  border: 1px solid #333;
  border-radius: 10px;
  padding: 5px 10px;
}
    <div id="container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
  <div class="item">five</div>
  <div class="item">six</div>
  <div class="item">seven</div>
  <div class="item">eight</div>
  <div class="item">nine</div>
  <div class="item">ten</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search