Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

display: flex doesn't expand the outer containing block #520

Closed
amlinux opened this issue Oct 11, 2023 · 6 comments
Closed

display: flex doesn't expand the outer containing block #520

amlinux opened this issue Oct 11, 2023 · 6 comments
Labels
layout Layout engine issues and enhancements

Comments

@amlinux
Copy link

amlinux commented Oct 11, 2023

Example that works:

		<div style="display: block; background-color: red; padding: 50px;">
			<div style="display: block; background-color: green; width: 100px; height: 100px;">
			</div>
		</div>

image

Example that doesn't (note that inner div has "display: flex"):

		<div style="display: block; background-color: red; padding: 50px;">
			<div style="display: flex; background-color: green; width: 100px; height: 100px;">
			</div>
		</div>

image

This behavior is different from CSS where flex containers expand their parents, and I coundn't find any notes about it in the documentation.

I tested this behavior in the 5.1 branch and at head.
@mikke89
Copy link
Owner

mikke89 commented Oct 11, 2023

This behavior really depends on the width of the parent of your outer width. I can't determine how it should look here without more context. Can you give a full reproducible, e.g. something that works in the demo sandbox?

In block sizing, the width should always fill its containing block, just like in CSS. If your parent is zero width, then the second image looks correct to me. If the parent is 200px, then the first one is correct. There might be some issue here if display block and display flex does not do the same thing. One possibility is that this is done in a shrink-to-fit width context, but I'd like some more information here.

@amlinux
Copy link
Author

amlinux commented Oct 11, 2023

Here is the full repro:

<rml>
	<body>
		<div style="display: block; background-color: red; padding: 50px;">
			<div style="display: flex; background-color: green; width: 100px; height: 100px;">
			</div>
		</div>
	</body>
</rml>

Indeed, if I specify width and height of body as 100%, then it behaves differently:

<rml>
	<body style="width: 100%; height: 100%;">
		<div style="display: block; background-color: red; padding: 50px;">
			<div style="display: flex; background-color: green; width: 100px; height: 100px;">
			</div>
		</div>
	</body>
</rml>

image

@amlinux
Copy link
Author

amlinux commented Oct 11, 2023 •
edited
Loading

I suppose the question is then - why doesn't body expand to fit the outer div?

@mikke89
Copy link
Owner

mikke89 commented Oct 11, 2023

I see, this is in a shrink-to-fit width context. What's going on here is that body is an absolutely positioned element. When you don't set any width on such elements, they will determine width based on their contents (shrink-to-fit). In RmlUi flexboxes and tables do not currently support shrink-to-fit, which is why it behaves differently from the block display. In this particular case though, their outer width is known, so maybe there is a simple fix to support "easy" cases like this.

The workaround here is simple enough though: Just place the width on the parent div instead of the flex. Or even better, set the width on the body (increase it to include padding). This is generally recommended for performance reasons, unless you really need to rely on fitting to the content.

In your last case, things work out exactly as expected. When you set a specific width on the body, the red div instead follows normal block layout, where blocks fill all available width.

@mikke89 mikke89 added the layout Layout engine issues and enhancements label Oct 11, 2023
mikke89 added a commit that referenced this issue Oct 11, 2023
@mikke89
Make flex containers and tables with fixed width work in shrink-to-fi…
8a94ab7 
…t contexts, see #520
@mikke89
Copy link
Owner

mikke89 commented Oct 11, 2023

In this particular case though, their outer width is known, so maybe there is a simple fix to support "easy" cases like this.

Alright, I went ahead and made a fix for this case. Let me know if it works for you :)

@amlinux
Copy link
Author

amlinux commented Oct 11, 2023

Oh wow! Thank you for the detailed explanation and for the fix. Much appreciated!

@amlinux amlinux closed this as completed Oct 11, 2023
@amlinux amlinux mentioned this issue Dec 26, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
layout Layout engine issues and enhancements
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@amlinux @mikke89