0

I want to make a design that looks similar to the attached image. The idea is to have all elements within the container flow into available space in a compact way altering its width and height if need be but respect its max and min-width.

Expectation

This gives an idea of what is to be accomplished

 .child {
      background: green;
      max-height: 70px;
      height:fit-content;
      max-width: 50px;
      margin: 4px;
      padding:4px;
    }

    .parent {
    max-width:300px;
      background: white;
      border: 1px solid blue;
      display: inline-flex;
      flex-wrap: wrap;
      overflow: scroll;
    }

    .child:nth-child(odd) {
      background: red;
    }
    <body>
      <div class='parent'>
        <div class='child'>Content</div>
        <div class='child'>A little long content</div>
        <div class='child'>C  ontent</div>
        <div class='child'>content</div>
        <div class='child'>Variation in  size </div>
        <div class='child'>kkk</div>
         <div class='child'>C  ontent</div>
        <div class='child'>content</div>
        <div class='child'>Variation in  size </div>
      </div>
    </body>
Ndifreke
  • 732
  • 1
  • 8
  • 13
  • Not possible with flexbox, or pretty much any layout method other than CSS-Grid...and that would be a tough one too. – Paulie_D Apr 08 '20 at 10:17
  • I am thinking if there is a way to gravitate the element towards the top of the container. Then it can get me closer to the base of the snippet I provided – Ndifreke Apr 08 '20 at 10:20
  • Nope...it's not that simple. - https://stackoverflow.com/questions/44377343/css-only-masonry-layout is essentially what you are after. – Paulie_D Apr 08 '20 at 10:27
  • Yeah, that is a decent implementation. But it assumes that all child item are the same width – Ndifreke Apr 08 '20 at 10:39
  • 1
    Not necessarily but other than that you need a masonry JS option. – Paulie_D Apr 08 '20 at 10:39

0 Answers0