john_galt
KPCKevin Powell - Community
•Created by john_galt on 7/9/2023 in #front-end
How to limit the height of flex-item to allow flex-grow and enable scrolling inside of it?
I want to allow
.flex-container
class to use flex-grow factor to take the available space, but limit the content inside of it from overflowing. Each column (.col-2
and .col-3
) should be a scroll containers
How can it be achieved?
Demo: https://codepen.io/Dimi_0-o/pen/qBQVNKp2 replies
KPCKevin Powell - Community
•Created by john_galt on 7/8/2023 in #front-end
Why second and third flex items doesn't take the remaining height space of container
Why don't 2nd and 3rd items take the remaining height of the container?
https://codepen.io/Dimi_0-o/pen/ZEmXPme
8 replies
KPCKevin Powell - Community
•Created by john_galt on 7/8/2023 in #front-end
How to make a container query on height of the flex item
I want to create a height container query for the flex container. But when I use container-type: size on my container it will treat container as having no intrinsic size. the blem, because height of the container can be changed during runtime.
How can I preserve the height behavior of the flex container, and add height container query to it?
Link to demo: https://codepen.io/Dimi_0-o/pen/xxQLjRB?editors=1100
1 replies
KPCKevin Powell - Community
•Created by john_galt on 7/5/2023 in #front-end
How to make a container query on height of the flex item
I want to create a height container query for the flex container. But when I use
container-type: size
on my container it will treat container as having no intrinsic size. the blem, because height of the container can be changed during runtime.
How can I preserve the height behavior of the flex container, and add height container query to it?
Link to demo: https://codepen.io/Dimi_0-o/pen/xxQLjRB?editors=11001 replies
KPCKevin Powell - Community
•Created by john_galt on 4/26/2023 in #front-end
Why div around flex-container breaks overflow scrolling?
I'm trying to make the flex-item be scrollable, but when adding wrapper div around flex-container the scroll is break and the entire page is scolling instead of content in flex-item
Example without div wrapping flex-container:
https://codepen.io/Dimi_0-o/pen/qBJmKKN
If uncomment
div
around .container
, then html
start to overflowing instead of flex-item
Why is this happening? What css spec/mdn part of CSS can I read to understand that behavior?4 replies