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

Flex inside flex #320

Closed
Core34 opened this issue May 29, 2022 · 2 comments
Closed

Flex inside flex #320

Core34 opened this issue May 29, 2022 · 2 comments
Labels
layout Layout engine issues and enhancements

Comments

@Core34
Copy link

Core34 commented May 29, 2022

When trying to use elements with flex properties inside an element with flex properties, I ran into the problem that flex properties don't work on child elements. Is this a rmlui problem or am I doing something wrong?

<rml>
	<head>
		<link type="text/rcss" href="rml.rcss"/>
		<link type="text/rcss" href="invader.rcss"/>
		<style>
			div#window  
			{
				display:flex;
				width: 100%;
				height: 100%;
				background:white;
				box-sizing: border-box;
				overflow: hidden auto;
				flex-direction: row;
				justify-content: center;
				flex-wrap: nowrap;
			}
                        div#content, div#content2
			{
				display:flex;
				position: relative;
				height:128px;
				width:40%;
				text-align: center;
				box-sizing: border-box;	
                                flex-direction: row;
			}
		</style>
	</head>
	<body class="window">
		<div id="window">
			<div id="content">
				<div style="width:20%;background:red;">1</div>
				<div style="width:60%;background:green;">2</div>
				<div style="width:20%;background:blue;">3</div>
			</div>
			<div id="content2">
				<div style="width:20%;background:red;">1</div>
				<div style="width:60%;background:green;">2</div>
				<div style="width:20%;background:blue;">3</div>
			</div>
		</div>
	</body>
</rml>
@mikke89 mikke89 added the layout Layout engine issues and enhancements label May 30, 2022
mikke89 added a commit that referenced this issue May 30, 2022
@mikke89
Show warning on nested flexboxes and other unsupported elements in a …
7686779 
…top-level formatting context, see #320
@mikke89
Copy link
Owner

mikke89 commented May 30, 2022

Hi. You're right, we don't support flex containers directly nested within another flex container right now. This would best be solved by a larger refactoring of the layout engine. That's not really a priority right now, especially as long as there are workarounds as shown below.

For now I've added a warning message so users know what's going on in this situation. I also added a test case for this situation as a reminder.

In this case you can wrap it in another set of divs:

<rml>
<head>
    <title>Flex ref</title>
    <link type="text/rcss" href="../../style.rcss"/>
	<style>
		#window {
			display: flex;
			width: 100%;
			height: 100%;
			overflow: hidden auto;
			flex-direction: row;
			justify-content: center;
			flex-wrap: nowrap;
		}
		.column {
			width: 40%;
		}
		.content {
			display: flex;
			height: 128px;
			text-align: center;
			flex-direction: row;
		}
	</style>
</head>

<body>
<div id="window">
	<div class="column">
		<div class="content">
			<div style="width: 20%; background: red;">1</div>
			<div style="width: 60%; background: green;">2</div>
			<div style="width: 20%; background: blue;">3</div>
		</div>
	</div>
	<div class="column">
		<div class="content">
			<div style="width: 20%; background: red;">1</div>
			<div style="width: 60%; background: green;">2</div>
			<div style="width: 20%; background: blue;">3</div>
		</div>
	</div>
</div>
</body>
</rml>

@Core34
Copy link
Author

Core34 commented May 30, 2022

Thanks for the advice.

@Core34 Core34 closed this as completed May 30, 2022
mikke89 added a commit that referenced this issue Feb 27, 2023
@mikke89
Improve and refactor layout engine, better conformance to CSS specifi…
4742dda 
…cation

- Improve readability and maintainability:
  - Better separation of classes, reduce available state.
  - Make classes better conform to CSS terminology.
  - Improve call-graph, flow from parent to child, avoid mutable calls into ancestors.
- Make layout more conformant to CSS specification.
  - Re-implement inline layouting.
  - Fixed more than a hundred CSS tests, including ACID1.
- Fix long-standing issues.
  - Allow tables and flexboxes to be absolutely positioned or floated.
  - Allow nested flexboxes: Flex items can now be flex containers themselves. #320
  - Better handle block-level boxes in inline formatting contexts. #392

Breaking changes:
- Reworked font engine interface, in particular in terms of font metrics.
- Possible layout changes, usually due to better CSS conformance.

Development commits:
- Add debug dump for layout tree
- Review function naming in layout engine
- WIP Start refactoring LayoutBlockBox (not compiling)
- Format
- Compiles again, all tests pass
- Refactoring
- Remove friend classes
- Remove dead code
- Add test for absolutely positioned and floated flex boxes
- Minor refactoring and formatting
- Format layout files
- Mini cleanup
- More const correctness
- Support for nested flex boxes, as well as flex boxes that are absolutely positioned or floated
- Small cleanup
- Float placement test
- Cleanup inline box
- Move Inline Container to own file
- Minor update display block test
- WIP inline formatting extreme makeover
- DumpTree rename
- WIP inline formatting
- WIP line box
- WIP inline boxes
- New inline formatting context (now compiling)
- Refactoring
- Add basic inline formatting visual test
- Fix formatting of inline block and replaced elements
- Update inline formatting visual test
- Refactoring
- Preparing for split fragments
- Update visual test
- Line wrapping
- Update visual test
- Layout tree dump: Use element attribute instead of id
- Line splitting
- Fix some spacing and line wrapping issues
- Fix placement of inline boxes
- Refactor inline layout
- Update visual tests
- Handle inline element splitting around block-level element, some refactoring
- Line box cleanup
- Refactor inline-level boxes
- Add new visual float test
- Minor
- Floating boxes and wrapping
- Floats can no longer wrap down lines which is set to 'white-space: nowrap'
- Fixes for overflow and scrollable content area
- Implement horizontal alignment in line boxes (text-align)
- Minifix
- Font engine interface: Refactor font metrics [breaking change]
- WIP Implement vertical-align, line box refactoring
- Top and bottom vertical alignment
- Baseline position of inline blocks
- Fix inline box height
- Use baseline position when adding ElementText lines
- Implement aligned subtrees for correct line-relative vertical alignment
- Fix float spacing
- Improved inline-block baseline
- Wrap if there is no available width
- More accurate static position for absolutely positioned elements
- Fix overflow padding sizing by subtracting scrollbar size
- Refactor inline layout
- Some cleanup, fix alignment of children of bottom-aligned inline boxes
- Inline layout cleanup
- Refactor inline layout
- Add new inline formatting test
- Update line box, linked open fragments
- Allow splitting all open inline boxes, collapsible line boxes
- Add tests for vertical-align and inline-block baseline
- Fix inline-block alignment
- Warn on missing font face when placing text, some cleanup
- Floating elements are now placed on the same line if they can fit next to the line's contents
- Add relative position test
- Add any ancestor relative positioning to our own position
- Properly resolve relative position of inline, floated, flex, and table elements
- WIP Formatting contexts
- WIP Make separate flex and table formatting contexts
- Small refactor block container constructor
- Extend overflow test
- WIP refactor overflow
- WIP More formatting contexts
- Refactor flex and table formatting
- Some cleanup
- Formatting context refactoring, remove offset root from block container
- Cleanup inline-block baseline
- Add visual test for static positions, update other tests
- Make containing blocks and offset parents more closely coincide
  - Partly change how absolute offsets and clipping regions are calculated, and enable static positions outside the current block formatting contexts
- Some refactoring
- Refactoring, make containing block more closely follow CSS behavior
- Handle indefinite containing blocks in some situations
- Share float space in block formatting context
- Some cleanup of block container
- Additional layout cleanup
- Add float text wrap test
- Fix repeated words on wrapped text
- Establish absolute positioning containing block when element has local transform or perspective
- Fix possible case of infinite loop in inline layout
- Cleanup floats, add test
- Fix overflowing floated boxes, cleanup, update tests
- Include floating space when determining the shrink-to-fit width
- Shrink-to-fit width uses available size
- Cleanup BuildBox
- Refactor formatting contexts and shrink-to-fit width
- Cleanup absolute positioning
- Refactor Layout
- More layout refactoring
- Cleanup block container
- More layout cleanup
- Formatting context cleanup
- More cleanup
- Further layout cleanup and comments
- Refactor layout pools
- Update Box user for previous change
- Fix some build issues
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
@mikke89 @Core34