Flex containers not positioned correctly when their margin-left/right is set to auto

[alexandergitter]

In the following example, a flex container (the .inner div) has its margin-left and margin-right properties set to auto, which should cause it to be centered in its parent div. Instead, it is positioned at the left edge of the .outer div.
WeasyPrint does this correctly when the inner div gets changed to display: block.

(This may or may not be related to #1171, although that issues talks about nested flex containers, whereas in my case the outer container is a normal block element.)

<style>
  .outer {
    background: red;
  }
  
  .inner {
    margin: auto;
    display: flex;
    width: 10rem;
    height: 10rem;
    background: black;
  }
</style>

<div class="outer">
  <div class="inner"></div>
</div>

[dhdaines]

Yes, this is because of this: https://github.com/Kozea/WeasyPrint/blob/main/weasyprint/layout/flex.py#L92

    # TODO: removing auto margins is OK for this step, but margins should be
    # calculated later.
    if parent_box.margin_top == 'auto':
        box.margin_top = parent_box.margin_top = 0
    if parent_box.margin_bottom == 'auto':
        box.margin_bottom = parent_box.margin_bottom = 0
    if parent_box.margin_left == 'auto':
        box.margin_left = parent_box.margin_left = 0
    if parent_box.margin_right == 'auto':
        box.margin_right = parent_box.margin_right = 0

It can, in fact, be solved by simply not setting box.margin_* to 0 - here parent_box is a temporary copy of the flex box which appears to be used (I don't totally understand the intent of the code) only for determining the minimum size of the flex items. Fixed in #2233