Kevin Powell - Community•6mo ago

max()

when i put this into the inline-size: max(var(--_calc), 100%), it overflows but if i just use in the max-inline-size var(—_calc) it works fine? selector is .slider-list. i want it to choose whichever is larger (i think...) so if there is room in the parent it will stretch out to fill the available space but otherwise just take up the room that is in the --_calc. i use min() often and i think this may be my first time using max() so i dont know what im doing wrong. please excuse the mess, im not done with the grid but this is driving me crazy. codepen

CleverMissFox-GAcct

CodePen

max-inline-size and max()?

...

7 Replies

Kevin Powell•6mo ago

If value1 is bigger than 100% (which I think it is in this case), it'll simply overflow, because it's taking the bigger of the two values.

width: max(valueX, 100%);

width: max(valueX, 100%);

If you use max-width instead, then it's allowed to be smaller than valueX, it just can't get bigger than that... and in reality, using max-width is essentially the same as width: min(valueX, 100%), just another way of writing it. (it is a little bit different, but not enough to matter)

clevermissfoxOP•6mo ago

its a scroll container though so overflow should be okay and it should scroll? valueX is basically setting # of visible items so --_calc: 4 (#) * (size) 12ch + 3em (gap). I tried setting this max for when the whole parent grid is wider and there was extra space in this slider container so i wanted it to expand to fill the rest of the available space if it was there. in that case, value1 was not larger than 100% (this is also a flex-child ) . I should probably figure out the parent grid layout first anyway , i was just confused why it wasnt taking up 100% when that was larger than the valueX .

MarkBoots•6mo ago

i didn't dive into it too much (will take some more time later), but aren't you forgetting the padding of each item? I see you're basing the calculations on the image size, but it's inside a button that has 1em padding

clevermissfoxOP•6mo ago

as you can see its not nearly done, that variable was intended to be updated with JS when i include the functionality with the slider buttons , right now im just trying to figure out my slider container issue. that came off a little snippy in text, snip not intended 🙏🏻 so i ended up wrapping the ul.scroll-list in another div (.scroll-container), set an overflow hidden on that and figured ill just set the sizing with the parent grid. however scroll-container is a flex-item; i set its flex-grow: 1; flex-basis: var(--_calc); . there is a media-query on .slider that flips from row to column at 600px (may be converted to a container query eventually). when it flips to column, the flex-basis would just flip its axis so when .slider is a col, the .slider-container would only be the height of the flex-basis and when its a row it will be the width. but now when its a column, the inner scroller (.scroll-list) no longer scrolls?i have brought back the scrollbars and they only appear when its a row. what could be causing that ? https://codepen.io/Miss-Fox/pen/xxoGJzb?editors=0100 update: for some reason i had to change my overflow from hidden to auto when the flex-direction changed from row to col. not sure why.

css 
.slider-container {
  overflow: hidden 
} 

@container slider (width < 25em) {
    .container-wrapper {
        flex-direction: column;

        .slider-container {
            overflow-y: auto;
        }

        & .slider-list {
            flex-direction: column;
        }

        & .btn-slider {
            rotate: 90deg;
        }
    }
}

css 
.slider-container {
  overflow: hidden 
} 

@container slider (width < 25em) {
    .container-wrapper {
        flex-direction: column;

        .slider-container {
            overflow-y: auto;
        }

        & .slider-list {
            flex-direction: column;
        }

        & .btn-slider {
            rotate: 90deg;
        }
    }
}

MarkBoots•6mo ago

hm, that suggests the height is limited somehow, but indeed i can't see in what way. you could set the overflow-x:hidden on the .slider-container, then you don't have to adjust it in the container query. I know that doesn't answer the why-question i think it has to do with the flex-basis now being in the column direction

Kevin Powell•6mo ago

Sorry I misunderstood the question and implementation from the first post 🙂

Update: for some reason i had to change my overflow from hidden to auto when the flex-direction changed from row to col. not sure why.

At larger screens, the list is matching the width of the parent, and the items are overflowing out of it. At smaller screens when it stacks, the list is just overflowing out of the bottom of the parent, so it's the parent that needs the scroll, rather than the list. Here's a very simplified example: https://codepen.io/kevinpowell/pen/vYqNKBY

Kevin

CodePen

vYqNKBY

...

clevermissfoxOP•6mo ago

Ah well that makes the JavaScript very annoying to have to wire the buttons to scroll the list if it’s a row but scroll the list.parentEl is it’s a column. Thanks so much. I’m wondering if I can just make the list.parentEl the scroller when it’s a row too and still get the scroll-snap-align behavior. Prob not… Or can I set the list to match its parents height to make the list the scroller again? I originally had overflow: hidden on the .slider-container for both flex-directions but when it switches to a column then the scroll no longer works (bc the parent is the scroller so overflow is hidden) so had to change it to overflow-y:auto and now it’s the scroller instead of the list. But the height of .slider-container is limited by its flex-basis. Gosh this has turned into a pain.

Gaming

Programming

max()