How can I flex a collection of elements to be the same width/fill remaining space?

[WilliamVenner]

How could I flex these buttons to fill the remaining space (designated by the red square)?

Code

Container::new(Column::new()

    .push(

        Container::new(Column::new()
        .align_items(Align::Center)
        .width(Length::Shrink)

        .push(
            Image::new(image::Handle::from_memory(include_bytes!("../assets/gmpublisher.png").to_vec()))
            .width(Length::Units(128))
        )

        .push(
            Text::new(format!("gmpublisher v{} by Billy", env!("CARGO_PKG_VERSION")))
            .horizontal_alignment(HorizontalAlignment::Center)
            .color(Color::WHITE)
        )

        .push(
            Landing::button(star_btn, "Star on GitHub")
            .on_press(Message::GitHubStar)
        )

        .push(
            Landing::button(new_addon_btn, "New Addon")
            .on_press(Message::NewAddon)
        )

        .push(
            Landing::button(open_addon_btn, "Open Addon")
            .on_press(Message::OpenAddon)
        )

        .push(
            Landing::button(my_workshop_btn, "My Workshop")
            .on_press(Message::MyWorkshop)
        )

        .push(
            Landing::button(settings_btn, "Settings")
            .on_press(Message::Settings)
        )

        .push(
            Landing::button(help_btn, "Help")
            .on_press(Message::Help)
        )

        .push(
            Landing::button(close_btn, "Close")
            .on_press(Message::Close)
        )

    )
    .width(Length::Fill)
    .height(Length::Fill)
    .center_x()
    .center_y()

    )

    .push(
        Column::new()
        .align_items(Align::Center)
        .width(Length::Fill)

        .push(
            Text::new(
                match &app_vars.gmod {
                    Some(gmod) => gmod.to_string_lossy().to_string(),
                    None => String::from("Garry's Mod installation directory not found! Add it in Settings.")
                }
            )
            .horizontal_alignment(HorizontalAlignment::Center)
            .color(Color::WHITE)
        )

    )

)

.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.padding(20).into()

Result

[Kaiden42]

Have you tried to set the width of the buttons to Length::Fill?

Button::new(&mut state, "Press Me!").width(Length::Fill)

[WilliamVenner]

Yes, this causes them to fill the width of the entire window.

[hangleang]

Just wrap all those buttons in a button group (Container) and give the container a specified width, then set all buttons width to Length::Fill.

[WilliamVenner]

I don't want to specify a fixed width.

In HTML/CSS you can just do this:

<style>
    #container {
        display: flex;
    }
    #container .btn {
        flex: 1;
    }
</style>
<div id="container">
    <div class="btn">...</div>
    <div class="btn">...</div>
    <div class="btn">...</div>
    ...
</div>

No need to specify any widths. The .btns will just fill the remaining space in their #container.

Druid is capable of this, which apparently the flex component of iced is inspired by: linebender/druid#1608 (comment)

[ruza-net]

Is the fix of this particularly hard? Can I perhaps contribute in any way (I haven't yet looked at the inner workings of iced)?

I'm doing a school project with iced which depends on this functionality, and I need to know if this has potential to land in time, or if I'm better off migrating to druid.

[WilliamVenner]

You might be better off with using Tauri, I found the data model of Druid very complex and the documentation is very poor. I don't think we're GUI yet, at least for a full blown application.

[Surferlul]

How do you fix this, now that #1735 has reverted #1044?