1643655 - Incorrect Info popup "it's not a flex item"

Status: RESOLVED WORKSFORME

(DevTools :: Inspector, defect)

Description

[Victor Trevor]

Attachment: Screenshot from 2020-06-05 12-33-25.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

Open Firefox Developer Tools and select a DIV with display:flex to view the style settings.

Actual results:

An info mesage was displayed alongside flex-basis:1580px which reports:

"flex-basis has no effect on this element since it’s not a flex item.
Try adding display:flex or display:inline-flex to the element’s parent. Learn more"

and access to the property is disabled

Expected results:

I should have had access to the flex-basis property because the item has display:flex
The Flex Container inspector allows the same div to be revealed as a flex item on the page.

The browser appears to be contradicting itself regarding whether the selected div was a flex item, and incorrectly preventing me from accessing the property to modify oit.

Comment 1

[Victor Trevor]

I am correcting myself: I can access the flex-basis property, despite it being greyed, but my changes make no impact, and the unexpected info message still advises that the flex-basis property is not applicable.

Comment 2

[Victor Trevor]

<div _ngcontent-yii-c9="" class="slide-navigation">
<span _ngcontent-yii-c9="" class="">Add / Edit</span><span _ngcontent-yii-c9="" class="btn nav-active">Employees</span>
<span _ngcontent-yii-c9="" class="">Documents</span><span _ngcontent-yii-c9="">Help</span>
</div>

div.slide-navigation[_ngcontent-yii-c9] {
align-items: center;
border-bottom: 1px solid #20a8d8;
border-top: 1px solid #20a8d8;
display: flex;
flex-basis: 400px;
grid-area: n;
justify-content: flex-start;
}

Comment 3

[Marcela (Please NI request to Brindusa Tot)]

Hi Victor!
Please could you add a more clear test case?
I've tried with this page https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox but I couldn't reproduce it.
Also, you can try to reproduce this problem on Firefox Nightly and tell us your input? You can download it from here: https://nightly.mozilla.org/

Comment 4

[BugBot [:suhaib / :marco]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 5

[Razvan Caliman [:rcaliman]]

Hi Victor,

Sorry for the very late reply. This bug landed just recently in our bug queue for DevTools.

It's not very clear from the screenshot if there is an issue.

Keep in mind that the flex-basis property applies to a flex item. So the parent element must be a flex-container. The screenshot and the code snippet do not show the styles of the parent node in your example so it's difficult to tell if there is unexpected interaction.

I created a small test case to check. When the Flexbox layout is correctly configured, the warning does not show.

Run the following in a new tab and inspect <div class="child> (notice that <div class="parent"> has display:flex`):

data:text/html,<style>div.parent{display:flex} div.child {display:inline-flex; flex-basis:1580px; justify-content: center}</style><div class="parent"><div class="child">

I could reproduce the effect you mention if I remove the display:flex from <div class="parent">, but that is the expected behavior and the warning explains why (just the element itself is a flex-container because of display: inline-flex`, but its parent is not a flex-container):

data:text/html,<style>div.child {display:inline-flex; flex-basis:1580px; justify-content: center}</style><div class="parent"><div class="child">

Comment 6

[Victor Trevor]

(In reply to Marcela from comment #3)

Hi Victor!
Please could you add a more clear test case?
I've tried with this page https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox but I couldn't reproduce it.
Also, you can try to reproduce this problem on Firefox Nightly and tell us your input? You can download it from here: https://nightly.mozilla.org/

Hello Marcela!
I'm so sorry that I never got back to you - it wasn't my intention to be so rude. You're colleague has picked up the issue now, so I shall further respond to them.
Thank you for contacting me. Keep safe!
Victor

Comment 7

[Victor Trevor]

(In reply to Razvan Caliman [:rcaliman] from comment #5)

Hi Victor,

Sorry for the very late reply. This bug landed just recently in our bug queue for DevTools.

It's not very clear from the screenshot if there is an issue.

Keep in mind that the flex-basis property applies to a flex item. So the parent element must be a flex-container. The screenshot and the code snippet do not show the styles of the parent node in your example so it's difficult to tell if there is unexpected interaction.

I created a small test case to check. When the Flexbox layout is correctly configured, the warning does not show.

Run the following in a new tab and inspect <div class="child> (notice that <div class="parent"> has display:flex`):

data:text/html,<style>div.parent{display:flex} div.child {display:inline-flex; flex-basis:1580px; justify-content: center}</style><div class="parent"><div class="child">

I could reproduce the effect you mention if I remove the display:flex from <div class="parent">, but that is the expected behavior and the warning explains why (just the element itself is a flex-container because of display: inline-flex`, but its parent is not a flex-container):

data:text/html,<style>div.child {display:inline-flex; flex-basis:1580px; justify-content: center}</style><div class="parent"><div class="child">

Good morning, Razvan!
Thank you very much indeed for picking up this issue for me.
I have taken note of your comments, which lead me to suspect that it's more likely that I have made a mistake.
I'm sorry that my example didn't show enough information for you to determine whether I had enclosed within a flex-container.

I may now have trouble finding the specific element where I thought that there was a problem, so unless I can come back to you soon, please feel free to close the matter on your list.
Thank you for pointing out where I may have gone wrong.

Keep safe and best wishes
Victor

Comment 8

[Razvan Caliman [:rcaliman]]

Thank you, Victor!

I will leave this issue open for a few more days. If you can't find the original issue, we'll assume it is not applicable anymore and close the bug.
If after a while you do manage to reproduce the issue, please leave a comment and we can reopen this bug.