I'm working on a responsive app and the containers nested in the design have their child containers wrap properly, but the parent container height of those children don't adjust after wrapping, so the content within gets cut off.
Nested containers are laid out as follows:
- Screen
- Horizontal container 1 (main wrapper)
- Container 1 (set width for menu)
- Vertical container 1 [Hor Overflow: hide; Vert Overflow: Hide; Wrap: On; Flexible Width: On]
- Container 2 (Title bar)
- Container 3 (Page content) [Flex height: On; ]
- Vertical Container 2 [Hor Overflow: Hide; Vert Overflow: Hide; Wrap: On]
- Container 4 (text)
- Horizontal Container 2 [Hor Overflow: Hide; Vert Overflow: Hide; Wrap: On; Flexible Height: On; Min Height: 50]
- Container 5 [Min Height: 100]
- Container 6 [Min Height: 100]
When testing and adjusting the browser window width, Container 5 and Container 6 appear to wrap as desired, but Horizontal Container 2 doesn't grow in height, so only the top half of Container 6 is displayed. I have tried adjusting various settings of the parent containers (including Justify and Align), but the content always gets cut off. If I turn Vertical Overflow to Scroll instead of Hide on the Horizontal Container 2, I can scroll that container to see Container 6, but not sure why Horizontal Container 2 won't grow to show all of Container 6 when it wraps.
Second image shows how content appears when the browser window is at full width versus when it is at reduced width. Container 6 (SLT alignment) wraps beneath Container 5 (Initiative Title), but Horizontal Container 2 doesn't adjust in height, so it cuts off Container 6.
This is my first time building out a responsive app, so I'm not sure if I'm doing something wrong with the layout. I included the properties that I think are important above, but if you need more I can provide.
11
Share
Report
All responses (
Answers (
