0

Using align-items: stretch on a <button> in Chrome seems to not work. It works fine in Firefox.

See an example here: https://jsfiddle.net/y8a2qoef/4/

stretch works fine when the container/flex-element is a <div> but not when it's a <button>

I wanted to post this here in case I'm missing something; maybe the spec says somewhere it's not supposed to work on <button>'s and Firefox is just being nice. Otherwise, it looks like this is a Chrome bug?

V. Rubinetti
  • 1,324
  • 13
  • 21
  • 1
    Considering this even works in IE, I'd have to call it a chrome bug. – EternalHour Sep 16 '19 at 03:49
  • Okay I'm gonna report it. – V. Rubinetti Sep 16 '19 at 04:17
  • The answers to the "duplicate" question are very useful and related, but the question itself isn't really a duplicate, because this question is specifically about the "stretch" value, while that question is about the "center" value (which works fine in Chrome). – V. Rubinetti Sep 16 '19 at 13:43
  • https://bugs.chromium.org/p/chromium/issues/detail?id=1004163 – V. Rubinetti Sep 16 '19 at 13:43
  • @V.Rubinetti, the duplicate shows that `button` elements reject changes to the `display` value in some browsers. This means that `display: flex` and flex properties, such as `align-items`, are ignored. So the values, whether `stretch` or `center`, are irrelevant. – Michael Benjamin Sep 16 '19 at 14:24

0 Answers0