Menu
I am attempting to use Flex-By-Default in the same manner as Facebook's CSS layout project. I am having some trouble when it comes to overriding the styles for display: inline-flex elements.
Per this jsfiddle:
The HTML, with two '.test-me' divs:
<body>
<h1>TEST</h1>
<div class="test-me">
I'm correctly displayed as inline-flex
</div>
<div>
<div class="test-me">
'Styles' shows inline-flex, but 'Computed' shows flex
</div>
</div>
</body>
Here is the styling:
.test-me {
display: inline-flex;
background-color: green;
border: 1px solid black;
margin: 6px;
}
div, span {
display: flex;
/* Commenting out flex-direction makes second test-me div display correctly */
flex-direction: column;
background-color: purple;
}
I am am slightly concerned this is a browser bug: in Chrome Developer Tools, 'Styles' shows 'inline-flex' winning (as it's from the more specific styling), but 'Computed' shows 'flex'.
Even though 'display: flex' is crossed out (since it's overridden by 'display: inline-block'), disabling the already crossed-out style fixes the issue.
883
Revised Answer
@BoltClock, in the comments, provides the relevant section in the spec covering this behavior.
The display value of a flex item is blockified: if the specified
displayof an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.
This means that in a scenario like the one described in the question, where a child of a flex container is given an inline-level value, the child computes to its block-level equivalent. In a nutshell, the flex item with display: inline-flex becomes display: flex.
Original Answer
I am am slightly concerned this is a browser bug: in Chrome Developer Tools, 'Styles' shows 'inline-flex' winning (as it's from the more specific styling), but 'Computed' shows 'flex'.
Tested your code in Chrome, Firefox and Internet Explorer 11. The behavior is all the same. So I wouldn't say this is a browser bug.
Although you are correct that in Chrome (and Firefox) the inspector shows 'Styles' having inline-flex and 'Computed' having flex, in IE11 it shows inline-flex on both panes, but it renders like the others nonetheless.
A reading of the spec suggests that flex items can only be block elements. Even though you're applying display: inline-flex to the div, the same div is a flex item of a larger container with display: flex. The flex item with inline-flex is possibly being overridden as part of the flex formatting context.
Although there is no direct reference to the spec, here's another answer that may be helpful: https://stackoverflow.com/a/27090088/3597276
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
