I can repro on Mac and Linux w/Chrome 60 dev.

Christian, would you mind looking into this? The element itself seems to have the right size but the inner control does not.

Christian figured out the bug. It's that the native controls theme code does not
set a minimum width equal to width, which means that the control can become smaller.

On Mac, there is a platform theme, which leads to I think this code getting called:

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/mac/ThemeMac.mm?type=cs&q=MinimumControlSize&sq=package:chromium&l=434

On Linux, there is no platform theme, which leads to this code getting called:

https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/LayoutThemeDefault.cpp?q=layoutthemedefault&sq=package:chromium&dr=CSs&l=206

For radio buttons, I think should set a min-width and min-height equal to width and height.


Finally, the reason that wrapping in a <span> fixes the issue is that spans have a computed
"minimum content scale" that includes the sizes (*not* min-sizes) of children. The flex algorithm
takes into account this minimum content scale.

To elaborate on the last paragraph, we basically call ComputedStyle::SetWidth using the theme-provided width. When the radio button is a direct child we do not take the width property into account for the min-content width, but when it is an indirect descendant we do take the width into account for the flex item's min-width.

patch: https://chromium-review.googlesource.com/c/581753/

OK, that patch will fix Linux/Windows/ChromeOS/Android. However, it does not fix Mac because I don't know the Mac code enough.

Fixing Mac will likely require changing ThemeMac::MinimumControlSize to return something reasonable for kRadioPart here:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/platform/mac/ThemeMac.mm?rcl=f044d8fb15f2369921b2b8c88f548501b7384e6f&l=434

cc'ing some people who may (?) have some experience in this area based on the git log, and moving myself to CC.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f49b0411204af67d51d054dd4c67161f4c1f9429

commit f49b0411204af67d51d054dd4c67161f4c1f9429
Author: Christian Biesinger <cbiesinger@chromium.org>
Date: Tue Jul 25 20:09:09 2017

Set a minimum size on checkboxes and radio buttons

We really don't want them to shrink below their default size
unless explicitly specified. This matters when they are used
as flex items, because we would otherwise compute their
min-content size to zero and shrink it to a tiny size.

Bug:  719737 
Change-Id: Ic5d6cbc134e079e76c307d049c5ec48d408214e0
Reviewed-on: https://chromium-review.googlesource.com/581753
Reviewed-by: Morten Stenshorne <mstensho@opera.com>
Commit-Queue: Christian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#489407}
[modify] https://crrev.com/f49b0411204af67d51d054dd4c67161f4c1f9429/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/f49b0411204af67d51d054dd4c67161f4c1f9429/third_party/WebKit/LayoutTests/css3/flexbox/radiobutton-min-size.html
[modify] https://crrev.com/f49b0411204af67d51d054dd4c67161f4c1f9429/third_party/WebKit/Source/core/layout/LayoutTheme.cpp
[modify] https://crrev.com/f49b0411204af67d51d054dd4c67161f4c1f9429/third_party/WebKit/Source/core/layout/LayoutTheme.h
[modify] https://crrev.com/f49b0411204af67d51d054dd4c67161f4c1f9429/third_party/WebKit/Source/core/layout/LayoutThemeDefault.cpp

I'll fix the Mac path.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/29eff3ab49027f70d179c783247568a3ffaacdac

commit 29eff3ab49027f70d179c783247568a3ffaacdac
Author: Chris Harrelson <chrishtr@chromium.org>
Date: Fri Aug 04 01:54:23 2017

[Mac] Set a minimum size on checkboxes and radio buttons

Followup to https://chromium-review.googlesource.com/c/581753

Bug:  719737 
Change-Id: Ibfe553c23884d04450223b17974214658ec6f763
Reviewed-on: https://chromium-review.googlesource.com/596474
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@opera.com>
Cr-Commit-Position: refs/heads/master@{#491914}
[modify] https://crrev.com/29eff3ab49027f70d179c783247568a3ffaacdac/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/29eff3ab49027f70d179c783247568a3ffaacdac/third_party/WebKit/Source/core/layout/LayoutTheme.cpp
[modify] https://crrev.com/29eff3ab49027f70d179c783247568a3ffaacdac/third_party/WebKit/Source/core/layout/LayoutTheme.h