CSS Flex layout column stretch issue


Hi, I’m new to React and UXP so you will see a few questions from me in this forum board :slight_smile:

So… I have fiddled around to make a layout I want for my future plugin panel. As CSS grid is not available, I used a bit more complex structure of CSS flex. But there’s an issue with columns (just copy/paste JSFiddle code to sample UI playground plugin):

See boxes 3, 4 and 6. No matter what I try, I can’t make columns stretch from top to bottom of a row - they are always centered. Am I missing something? Since we have to use Flex instead of Grid and it makes DOM already more complex than necessary, I’d really love to avoid additional wrappers and relative/absolute positions.

Thank you

UXP’s default stylesheet is a little different than browsers, and this is a case where that’s true. If you tell UXP you want the row class to align-items: stretch, you’ll get the behavior you’re after.

.row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
1 Like

Yes, thank you :slight_smile: Seems so simple now :slight_smile: