Support for min-content / max-content? #1126

New Issue

2022-02-10T14:22:30-08:00

shmax commented

2022-02-10 14:22:30 -08:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Hi there, I'm working on a react-native layout that I can't seem to solve without using max-width: min-content, which doesn't seem to be supported in Yoga.

Have a look here:
http://jsfiddle.net/shmax/e3hud7xp/

The idea is that the blue and red text both occupy the parent space, and may not overflow it. The blue text is dominant and will win any argument over available real estate with the red text (so the red text will show ellipses, but the blue text won't unless it's wider than the overall space). The catch is that I have a value, p, which is the point along the width at which the red text will hold its ground; in other words, if there is not enough room for red and blue, and blue needs more than p percent of the available width, then both red and blue will truncate with ellipses at p.

I'm still trying to find alternate solutions, but so far the only thing I can get to work relies on that max-width: min-content you see in the .item style.

In the meantime, I thought I'd inquire about it here. I checked all the open and closed issues, and nobody has asked about either min-content or max-content, so maybe I'm missing something obvious.

Would a PR be welcome?

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate Hi there, I'm working on a react-native layout that I can't seem to solve without using `max-width: min-content`, which doesn't seem to be supported in Yoga. Have a look here: http://jsfiddle.net/shmax/e3hud7xp/ The idea is that the blue and red text both occupy the parent space, and may not overflow it. The blue text is dominant and will win any argument over available real estate with the red text (so the red text will show ellipses, but the blue text won't unless it's wider than the overall space). The catch is that I have a value, p, which is the point along the width at which the red text will hold its ground; in other words, if there is not enough room for red and blue, and blue needs more than p percent of the available width, then both red and blue will truncate with ellipses at p. I'm still trying to find alternate solutions, but so far the only thing I can get to work relies on that `max-width: min-content` you see in the `.item` style. In the meantime, I thought I'd inquire about it here. I checked all the open and closed issues, and nobody has asked about either min-content or max-content, so maybe I'm missing something obvious. Would a PR be welcome?

👍 1

NickGerleman commented

2022-10-04 07:44:35 -07:00

(Migrated from github.com)

I have seen this gap documented in source code "yoga.cpp". I think it would be a good parity item for browser layout. I have been working to improve the health of this repo WRT contribution, and a PR would be welcome.

shmax commented

2022-10-06 11:41:00 -07:00

(Migrated from github.com)

@NickGerleman Thank you for replying. I spent a few weeks trying to figure this out, and while I was able to rough-out crude min-content/max-content functionality, the use case in my jsfiddle still wouldn't work. I had other tasks to work on and ultimately had to give up, but if you're serious about improving the health of this repo I would think a great first step would be to figure out why building in a Windows environment doesn't work:

https://github.com/facebook/yoga/issues/1131
buck test //:yoga doesn't work

From there, I would be very keen to hear your thoughts about how to implement this feature.

@NickGerleman Thank you for replying. I spent a few weeks trying to figure this out, and while I was able to rough-out crude min-content/max-content functionality, the use case in my jsfiddle still wouldn't work. I had other tasks to work on and ultimately had to give up, but if you're serious about improving the health of this repo I would think a great first step would be to figure out why building in a Windows environment doesn't work: * https://github.com/facebook/yoga/issues/1131 * `buck test //:yoga` doesn't work From there, I would be very keen to hear your thoughts about how to implement this feature.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1126