Dynamic response of flex items in a flexbox

HTML & CSS
1

Hi, all.
So I want the heading ‘Playlists’ to grow an shrink with appearing containers. It works fine until the wrap comes into effect, as you can see in the gif
gif
.
I’ve tried all I know of but nothing works. Here’ s my HTML & CSS.

<div class="playlists_wrapper">
  <h1 class="playlists_heading">Playlists</h1>
  <div class="playlists_container">
    <div class="tracks_wrapper">
        <h2 >My first playlist</h2>
        <div class="track_details_container">
          <ul class="track_details">
            <li class="track_name">Dwed Wrthym Pam</li>
            <li class="track_artist"><span>by</span> Cor Ysgol Glanaethwy Choir</li>
            <li class="track_album"><span>from</span> O Fortuna</li>
          </ul>
        </div>
    </div>
  </div>
</div>

.playlists_wrapper {
    display: inline-block;
    margin-top: 50px;
}

.playlists_heading {
    background-color: var(--darkBlue);
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 7px 20px;
}

.playlists_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 0;
    text-align: left;
}

.tracks_wrapper {
    background-color: var(--darkBlue);
    padding: 20px;
    border-radius: 10px;
    width: 410px;
    height: 450px;
    overflow:scroll;
}

Please help!

2

What’s the HTML structure?

Wrapper presumably is going around the whole thing… heading… inside container? beside container? What’s the element types?

(Basically, i’m trying to mock this up in Codepen. Halp.)

3

m_hutley,

I added HTML structure.

4

Is there a predefined width on tracks_wrapper ?

(My mind tells me there’s a javascript based maths answer to this, but not necessarily a CSS one because CSS for its infinite wisdom cannot have a divisor with units)

5

Yes, 410px. I’ve included its params in CSS above. Why can’t it be simple. :grinning:

6

See, my mind says max-width: calc(100vw - (round(down, 100vw / 410px) * 410px) - ((round(down, 100vw / 410px) - 1) * 30px), but that doesnt work because you cant divide 100vw by 410px. I can divide 100vw by 7 and get a pixel measurement, but not by X pixels and get a number.

8

How many boxes are you wanting aligned horizontally?

It looks you have 2 across so I guess there’s a max-width somewhere.

The h1 heading playlists can grow with content as required but I’m not really sure of all your dynamics but you would need a structure like this.

I’m not sure that’s what you wanted though and you’d need media queries for screens smaller than 2 across?

9

It’s a flex container, so the answer i assumed was “As many will fit on the page horizontally given a fixed width of item at 410px with a 30px gap”?

10

Ah ok. :slight_smile:

My demo will fail if items need to wrap automatically at some point. You can’t shrink the container to match the width of its content when that content has wrapped.

11

Well, not with CSS anyway.

Javascript can do it by calculating the formula above and injecting the value into the CSS (Style? CSS? Is it still CSS if you’re playing with the values at runtime? whatever.)

2 Likes
12

Youi could use a few media queries assuming you have one known dimension to work with (i.e. the box width).

1 Like
13

Yes, m_hutley was right, as many as possible. :slight_smile: I appreciate your help, guys. Will try your solution, m_hutley.

1 Like