Bug 290444 – Button with Column Flex Layout Does Not Expand Child Flex Containers to Full Width

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[thecloer]

Created attachment 474720 [details]
compare the result of the example code in chrome and safari

When a `<button>` element styled as a column flex container (using `display: flex; flex-direction: column;`) contains child flex containers, the children do not expand to the full width of the parent. As a result, inner elements that rely on `margin-left: auto` for right alignment do not behave as expected.

**Description:**  
The following HTML example demonstrates the issue:

```html
<style>
  .wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 200px;
  }
  .content {
    display: flex;
  }
  .right {
    margin-left: auto;
  }
</style>

<button class="wrapper">
  <div class="content">
    <div class="right">content</div>
  </div>
  <div class="content">
    <div class="right">content</div>
  </div>
</button>
```

Expected Behavior:
Each child flex container (`.content`) should expand to the full width (200px) of its parent (`.wrapper`). This would allow the `.right` element—with `margin-left: auto`—to align to the right as intended.

Actual Behavior:
In Safari, the child flex containers only size themselves based on their content. They do not expand to occupy the full width of the parent button, causing the `margin-left: auto` property on the inner `.right` elements to have no effect.

Additional Information:
- The issue appears to be specific to Safari’s handling of flexbox on `<button>` elements when using a column layout.
- The same code behaves as expected in other browsers (e.g., Chrome), where the child flex containers correctly stretch to fill the parent’s width.
- A simplified test case is provided in the code snippet above.

[Karl Dubost]

Thanks for the report. Firefox is giving the same result than Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/148407527>

[Ahmad Saleem]

It might be leading to this WPT failure as well - https://wpt.fyi/results/html/rendering/widgets/button-layout/anonymous-button-content-box.html?label=experimental&label=master&aligned

[thecloer]

This is a simplified version of the example code.

```html
<style>
  .container {
    display: flex;
    flex-direction: column;

    /* styles */
    gap: 5px;
    width: 200px;
  }
  .item {
    display: flex;

    /* styles */
    background-color: red;
    min-width: 50px;
    height: 15px;
  }
</style>

<h1 data-title></h1>
<button class="container">
  <div class="item"></div>
  <div class="item"></div>
</button>
```

[Ahmad Saleem]

https://html.spec.whatwg.org/multipage/rendering.html#anonymous-button-content-box

If the element is an input element, or if it is a button element and its computed value for 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', then the element's box has a child anonymous button content box with the following behaviors:

The box is a block-level block container that establishes a new block formatting context (i.e., 'display' is 'flow-root').

If the box does not overflow in the horizontal axis, then it is centered horizontally.

If the box does not overflow in the vertical axis, then it is centered vertically.

Otherwise, there is no anonymous button content box.

[Karl Dubost]

Created attachment 474865 [details]
testcase 01

This is the testcase for the first code provided.

[Karl Dubost]

Created attachment 474866 [details]
rendering in safari, firefox, chrome

This is the rendering in

Safari Technology Preview  216 / 18.4          20622.1.7.2
Firefox Nightly            138.0a1       13825.3.20
Google Chrome Canary       137.0.7113.0  7113.0


So I guess the issue is solved in recent versions of Safari.

[Karl Dubost]

thecleor could you double check in STP 216.

[thecloer]

I just checked it in STP 216 and it looks solved that version. 
Thank you for your prompt response. I'm sorry for taking up your time; next time, I'll make sure to check STP as well.

[thecloer]

+ 
this line fixed the bug. "button" element had align-items: flex-start.

https://github.com/WebKit/WebKit/commit/d12e44816fa89ab09bf67649ec7178fffabb8b71#diff-912b7a9a58600e7211a3ccce85f325711de0c3d4a880027e942b0906c04f2ea4L883

[Karl Dubost]

no issue and you're welcome.

[Karl Dubost]

*** This bug has been marked as a duplicate of bug 289441 ***