Inconsistencies in cross-axis stretching

[mhsmith]

Describe the bug

This is related to the following comment on #1194, but I'm creating a separate issue because I think it's a bug rather than an enhancement.

To support center alignment here, we would need an equivalent to CSS align-self. Its default value is taken from align-items on the parent, and the default value of that is stretch, which is consistent with the current behavior: the button fills the available width.

Where I think we diverge from CSS is the way we implement alignment, which #1778 maps to align-items. If I take the second example and setalignment to left, center or right on the column box, it makes no difference: the children continue to be stretched to the full width.

A lot has changed in this area in the last 6 months, but I'm still seeing some inconsistencies in whether widgets are stretched in the cross axis.

import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW


class HackdaysAIApp(toga.App):
    def startup(self):
        main_box = toga.Box(
            style=Pack(direction=COLUMN),
            children=[
                toga.Box(style=Pack(height=40, background_color="cyan")),
                toga.Box(
                    style=Pack(direction=ROW, background_color="pink"),
                    children=[
                        toga.Box(style=Pack(flex=1, height=150, background_color="lime")),
                        toga.Box(style=Pack(width=40, background_color="orange")),
                    ],
                )
            ],
        )

        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = main_box
        self.main_window.show()


def main():
    return HackdaysAIApp()

The cyan box is a child of a top-level COLUMN, and it's being stretched to fill the cross axis.

The orange box is a child of a second-level ROW, but it's not being stretched in the cross axis, which is why it's collapsing to nothing.

From experimentation, I think this is down to whether the container's cross-axis size is externally-determined, or if it's shrinking to fit its content. For example, if you add either height=150 orflex=1 to the ROW box, then the orange box will appear. And of course, the top-level COLUMN box's size is determined by the window.

If I understand correctly, whether a child is stretched to fit the extra cross-axis space should not be affected by how that space was determined. It should stretch whenever it's able, or if it's unable, it should be positioned according to the alignment property.

Environment

• Operating System: macOS
• Python version: 3.8
• Software versions:
  • Toga: main (536a60f)