0

What im after is exactly THIS here.

The solutions provided are

  1. "js, jquery", jquery is def. not desired. Would like to avoid vanilla js also.
  2. "css, html only", but hacky and not general enough.

How can this be archieved without hacking, staying general and dynamic and not having to use javascript?

I dont really care what css technique is used. flex, table, grid. As long as its general and dynamic.

Here is a playground ==> jsfiddle <== I have prepared.

The red borderline should be a small as possible without creating further wrapping.

<h3>
3. with window resize (resize the windows width )
</h3>
looks like
<div class="IwillForceAgivenWidth" style="width: 100%">
  <div class="parent">
    <button class="child">some text here longer Text</button> 
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
    <button class="child">some text here longer Text</button>
  </div>
</div>
Community
  • 1
  • 1
Andre Elrico
  • 10,956
  • 6
  • 50
  • 69
  • only CSS grid can help here (until now) – Temani Afif May 02 '19 at 14:37
  • @TemaniAfif Flexbox seems like a viable solution as well, no ? – Jake May 02 '19 at 14:39
  • 1
    @Jake if you want to have a fixed size for the elements, I don't think so but if you are open to have the element grow slightlly then you can have something using flex-grow/flex-basis/flex-wrap – Temani Afif May 02 '19 at 14:43
  • @TemaniAfif the solution doesn really work that well and does not meet requirement for general and dynamic. If `min-width: 50vw;` is changed, the window overflows. Im asking to open this one. – Andre Elrico May 02 '19 at 14:57
  • this is actually the only CSS way to achieve what you want, if it doesn't fit your requirement you can edit your question to show how this solution doesn't work and you can vote to reopen the question – Temani Afif May 02 '19 at 15:03

0 Answers0