Kevin Powell Comments - Answer Overflow

Kevin Powell

•Created by Cracleur on 3/24/2025 in #front-end

Firefox flexbox column wraps, but parent width doesn’t expand (works fine in Chrome)

Not sure if it would give you the desired result, but since you want them in columns, and then "wrap" into a new row, could you use columns isntead? Also only really becomes useful when you have a specific height to work within, which you have.

.container{
  columns: 3 100px;
}

.item {
  /* prevent item going over two columns */
  break-inside: avoid;
  
  /* prevent items from stretching full-width of column */
  width: fit-content;
}

.container{
  columns: 3 100px;
}

.item {
  /* prevent item going over two columns */
  break-inside: avoid;
  
  /* prevent items from stretching full-width of column */
  width: fit-content;
}

The number of columns is optional, but will set an upper bounds, with the width being the "ideal" width.

4 replies

KPCKevin Powell - Community

•Created by KesSaft on 3/25/2025 in #front-end

Select in Popup

With the current solutions we have with overflow, if you are hiding the overflow, you're hiding all of the overflow, there isn't a way to say "all the content, except for this thing". Selects, and similar, are one of those things where it'd be nice if this wasn't the case... The general solution is to use a different wrapper for the overflow... something like:

<dialog>
  <div class="dialog__content"> ... </div>
</dialog>

<dialog>
  <div class="dialog__content"> ... </div>
</dialog>

and then:

dialog {
  position: relative;
}

.dialog__content {
  overflow: auto;
  width: 100%;
  height: 100%;
}

dialog {
  position: relative;
}

.dialog__content {
  overflow: auto;
  width: 100%;
  height: 100%;
}

Takes more than just that for it to work, but in doing this, positioned elements will be positioned elements are relative to the dialog, and not the div, so they can still overflow. That might not help you, it probably depends if you are your select menus custom ones that you created, or are they using <select> - if it's custom, you could probably go down this path if needed. Anchor positioning could also make it a lot easier, with the browser support caveat (though there is a polyfill).

2 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 3/25/2025 in #front-end

Link for Flex Box simplified course not received

sent an email a little while back, sorry about that once again 🙂

5 replies

KPCKevin Powell - Community

•Created by Anurag Gupta on 3/25/2025 in #front-end

Link for Flex Box simplified course not received

I'll get back to you later today

5 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

I was using gaps to say that I want one unit in between each piece.

Yeah, can't think of a simple solution for that. With the gaps on, however, you can't use subgrid. Looking at the second example though, it looks like everything is lining up now

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

I've done a quick version here using subgrid: https://codepen.io/kevinpowell/pen/jEOPqqm

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

Looking at what you have now, I wouldn't use any gaps?

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

For the 2nd one, I'm getting a "Sandbox not found", it might be set to private?

7 replies

KPCKevin Powell - Community

•Created by roelof on 2/11/2025 in #front-end

Grid or a mix of grid and flexbox

Yeah, I'd have a main two column grid, and then smaller grids inside of the different things I need

7 replies

KPCKevin Powell - Community

•Created by roelof on 2/11/2025 in #front-end

Grid or a mix of grid and flexbox

I think you could do all of this with Grid. Even the navigation, which I usually would use Flexbox for, is probably better suited for Grid.

7 replies

KPCKevin Powell - Community

•Created by Helgi on 2/2/2025 in #front-end

css questions

You can definitely use a regular image, rather than a background image. Some people will suggest that you do, so that it's actual content on the page, which becomes available to screen readers, etc. Position relative might not be what you'd want to use though. Grid is usually my go to. Looking at that image though, my initial thought would be a background image right on the body

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

8 replies

KPCKevin Powell - Community

•Created by Dawson on 1/24/2025 in #front-end

Flicker in background transitions using keyframes

as for how to fix it... I'm not 100% sure, lol. I'd probably have all 5 images as regular images and not background images, stacked on each other, and have their opacity going independently. something like:

.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

A negative delay starts the animation that far into the animation, so it would start it at 50%, where it's already loaded in. I think my numbers would work, but I haven't tested it 😄

4 replies

KPCKevin Powell - Community

•Created by Dawson on 1/24/2025 in #front-end

Flicker in background transitions using keyframes

I could be wrong on this, but I notice the issue only seems to happen the first time around. I think it's being caused by the image loading in for each of them.

4 replies

KPCKevin Powell - Community

•Created by CantFind on 1/23/2025 in #front-end

I need help on making website scroll timeline

Oh, having the end also be at 50vh might also work... like, the start and the end (and what might require keeping the extra step?)

5 replies

KPCKevin Powell - Community

•Created by CantFind on 1/23/2025 in #front-end

I need help on making website scroll timeline

I'm not sure if there is a way to perfectly line it up so that it's directly in the middle of the viewport with how you're doing it. The first thing I'd try is starting the animation when it's at 50vh, instead of 4.5%, and removing one of the steps in the animation. If that doesnt' work, I do have another suggestion that's a bit more complex, but would definitely work 😄

5 replies

Gaming

Programming