CSS Flex layout column stretch issue

Photoshop UXP Plugin API
,
1

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):

image
image807×950 10.9 KB

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

2

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.

image
image1904×956 112 KB

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

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