0

I have a question about the dynamic width of child elements and working with multiple rows (if needed).

I started with this example (found here)

.wpr {
  display: flex;
  width: 100%;
}

.wpr div {
  flex: 1 1 0;
  border: 1px solid red;
  text-align: center;
}
<div class="wpr">
  <div>First link</div>
  <div>Second link</div>
  <div>Third link</div>
  <div>Fourth longer --- link</div>
  <div>Fifth link</div>
  <div>Sixth link</div>
  <div>Seventh link</div>
</div>

But the problem is that "Fourth longer --- link" is not shown on one row.

How do I want to work? If there are to many child elements to display them on one row (width of parent) it should display the child elements on multiple rows. Every child in the same "column" shoud have the same width. A little bit like a HTML-table.

But the problem is that it should be dynamic. I don't know in advance how many div's I will have. It depends on my query results.

In short, this is what I need:

  • Every content of the child element must be shown on one line
  • If there are to many child elements. You start a new row (2, 3 or more if needed)
  • Every child in the same "column" shoud have the same width. (like a table)
  • In the last row there can be empty "columns" at the end.

For example (with a table):

#parent{

}

.ChildElement1{
  border: solid 1px #000000;
  width: 75px;
}

.ChildElement2{
  border: solid 1px #000000;
  width: 85px;
}

.ChildElement3{
  border: solid 1px #000000;
  width: 90px;
}

.ChildElement4{
  border: solid 1px #000000;
  width: 150px;
}
<table id="parent">
  <tr>
    <td class="ChildElement1">First link</td>
    <td class="ChildElement2">Second link</td>
    <td class="ChildElement3">Third link</td>
    <td class="ChildElement4">Fourth longer --- link</td>
  </tr>
  <tr>
    <td class="ChildElement1">Fifth link</td>
    <td class="ChildElement2">Sixth link</td>
    <td class="ChildElement3">Seventh link</td>
    <td>&nbsp;</td>
  </tr>
</table>
  • The width of the parent div is also dynamic. 100% of screen. So if you make it smaller the child elements can move to another row.

My question is, Is this even feasible? If yes, how?

If not. I can work with floating div's but they will not have the same width. Or do you have another (clean) proposal?

endeka
  • 131
  • 1
  • 15
  • 1
    Not with flexbox. CSS-grid would be an option. I'd suggest you start there. – Paulie_D Nov 02 '21 at 09:25
  • Tnx. But with CSS-grid you have the same width for every "column"? – endeka Nov 02 '21 at 09:35
  • With grid not all columns have the same width, they may vary. But without setting an exact amount of columns I think what you are trying to do is as well not possible with grid, have a look at this [post](https://stackoverflow.com/questions/52764726/css-grid-auto-fit-with-max-content) – Corrl Nov 02 '21 at 10:39
  • ..or this [post](https://stackoverflow.com/questions/52504049/why-doesnt-min-content-work-with-auto-fill-or-auto-fit) or [this](https://stackoverflow.com/questions/51594965/why-auto-fit-or-auto-fill-not-working-properly-with-minmax) – Corrl Nov 02 '21 at 11:11
  • Indeed. I think I will have to choose, working with flex or grid. My solution is not possible. – endeka Nov 03 '21 at 07:53

0 Answers0