width: 100% mixed with width: auto amongst children has changed recently

[davep]

This has been mentioned and reported in a couple of places, and @willmcgugan is aware and considering the issue, but I thought it a good idea to have a central issue recorded for it (if only so there's somewhere to point anyone seeing the same problem with their apps at).

Given this code:

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Label

class Width100PCentApp(App[None]):

    CSS = """
    Vertical {
        border: solid red;
        width: auto;

        Label {
            border: solid green;
        }

        #first {
            width: 100%;
        }

        #second {
            width: auto;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Label("I want to be 100% of my parent", id="first")
            yield Label("I want my parent to be wide enough to wrap me and no more", id="second")

if __name__ == "__main__":
    Width100PCentApp().run()

until very recently this would result in the container being wide enough to contain the widest child, and the more-narrow child growing to fit the width of the container. Visually something like this:

As of (I think) 0.54, this has changed, and now the width: 100% within a width: auto container is causing the container to grow too wide:

This has been the cause of Textualize/trogon#77 and Textualize/frogmouth#98 as well as #4354. I've not checked yet but I strongly suspect this will also have broken ModalScreen dialogs on a couple of my main applications too, if used with 0.54.

[TomJGooding]

Looks like f094588 is the bad commit.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.