2

Is there a bug with certain versions of Chrome that fail for horizontal centering with Chrome? The code below is a fairly simple center with flexbox that works fine on Firebox 62 but does not center on both Chrome 69 and 70 :-(

fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div>
  <form>
    <fieldset>
     <input type="text" id="password"></input>
     <p>Some dummy text</p>
     <button class="button-primary">Login</button>
    </fieldset>
  </form>
</div>
timbo
  • 13,244
  • 8
  • 51
  • 71
  • 1
    I am not sure why you even need flexbox .. a simple `text-align:center` on the fieldset will do it. Better avoid complex code when it's easy. – Temani Afif Oct 03 '18 at 22:27
  • It sure does. But I'm just surprised that such a base flexbox case renders so differently between Chrome and Firefox. – timbo Oct 03 '18 at 22:33
  • 1
    bug happens ;) especially when dealing with non-common elements like fieldset. If you use a div instead it will work. There is probably a particular Spec for them. – Temani Afif Oct 03 '18 at 22:34

1 Answers1

1

This is a known bug that has existed since flex was first implemented in Blink.

https://bugs.chromium.org/p/chromium/issues/detail?id=375693

Various other browsers and engines have had this issue in the past (Firefox, Webkit) but have been fixed. Blink is the last major engine that, to date, has not correctly implemented flex in a <fieldset> element.

See also Why can't <fieldset> be flex containers?

jla
  • 4,191
  • 3
  • 27
  • 44