Closed Bug 613426 Opened 10 years ago Closed 8 years ago

css3 flexbox request: dynamically obtain min-width|height from other element's dimensions

Categories

(Core :: CSS Parsing and Computation, enhancement)

enhancement
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 763689

People

(Reporter: giorgio.liscio, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101117 Firefox/4.0b8pre
Build Identifier: 

hi, it would be nice, when flexbox will be a standard and will be improved, to dynamically specify element min-width|height according to other element's dimensions

for example, i want a flexible button with min width/height equal to the contained icon:

<style>
button
{
      box-flex:1;  /* the button is flexible */
      box-orient:  horizontal;
      min-width: element(::scope > img.icon);      /*selector, 16px computed as specified in img' style attribute */
      min-height: element(::scope > img.icon);     /*selector, 32px computed as specified in img' style attribute */
}

button > span
{
      min-width:0;
      text-overflow:ellipsis;
}

</style>
<button>
      <img class="icon" src="icon.png" style="width:16px;height:32px;" />
      <span>My label</span>
</button>

i hope this is a good proposal

(ps i dont know how the scope is resolved by the selector api, i used ::scope to refer to the button itself)

thank you :)

Reproducible: Always
Summary: css3 flexbox request → css3 flexbox request: dinamically obtain min-width|height from other element's dimensions
Doesn't that just give you an excellent way to produce circular dependencies?
Summary: css3 flexbox request: dinamically obtain min-width|height from other element's dimensions → css3 flexbox request: dynamically obtain min-width|height from other element's dimensions
it may allow only descendants of the element?
Yes, but the sizes of the descendants depend on the ancestor.

Now in flexbox it may be possible to make this converge eventually... maybe.
> Yes, but the sizes of the descendants depend on the ancestor.

not their min-width|height

if my descendant is flexible and/or has align="stretch", its min sizes are not dependent by the ancestor

<style>
button
{
      box-flex:1;  /* the button is flexible */
      box-orient:  horizontal;
      min-width: element(::scope > img.icon);
      min-height: element(::scope > img.icon);
}

button > span
{
      min-width:0;
      text-overflow:ellipsis;
}

</style>

<button flex="1" align="stretch">
      <img class="icon" flex="1" src="icon.png" style="min-width:16px;min-height:32px;" />
      <span flex="1">My label</span>
</button>
Min sizes can be set in percentage units in CSS, no?
ah, true... but percentage are not allowed in flexbox or i'm wrong?

i don't know how it must work, but i think it is useful

so how it is calculated moz-min-content with percentages?
> so how it is calculated moz-min-content with percentages?

For min-content, percentages are assumed to be 0.
so it can be a solution for this too, no?
(In reply to Giorgio from comment #0)
> hi, it would be nice, when flexbox will be a standard and will be improved,
> to dynamically specify element min-width|height according to other element's
> dimensions
> 
> for example, i want a flexible button with min width/height equal to the
> contained icon:

This sounds like basically a dupe of bug 763689. (And if the reporter's requesting anything beyond that, it'd really need to be tracked in a spec issue rather than a Mozilla bug.)

Resolving as dupe of bug 763689.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 763689
You need to log in before you can comment on or make changes to this bug.