1

How do I force Chrome to respect display: inline !important; in a flexbox parent when applied to it's child elements? Chrome forces elements to be displayed as block no matter what I set the display property to. ︎

XML

<fieldset>
<a></a>
<input />
</fieldset>

CSS

fieldset {align-items: center; display: flex;}
fieldset * {display: inline !important;}
John
  • 1
  • 13
  • 98
  • 177
  • https://stackoverflow.com/questions/28078681/ / https://stackoverflow.com/questions/55380453 – kukkuz May 09 '19 at 05:13

3 Answers3

1

display:inline property doesn't work on children when the parent is using display:flex property. You have to use flex-basis and flex-grow properties to set children as requirements.

If still you want to force Chrome to treat children as display: inline !important; you can simply applied justify-content: flex-start; in the parent div something like this: 

fieldset {
     display: flex;
     align-items: center;
     justify-content: flex-start; /* or center */
}
Vijay Mangal
  • 11
  • 3
0

can you please try:

inline-block

note: try inline-block instead of inline.

HAPPY SINGH
  • 536
  • 4
  • 13
0

its a bug use other element instead of fieldset like div. then you don't have to use display inline or display inline-block

vinay choudhary
  • 174
  • 9