Problem:I’m building a kiosk-mode display where content (80% width) and aside (20% width) should dynamically scale to fit the window without being cut off. The slide-text section at the bottom should always stay visible. However, the content gets truncated when the window resizes, even though I’ve tried Flexbox and object-fit: contain.
Desired Behavior:
- Content (left): Image/text scales down to fit 80% width.
- Aside (right): List stays fully visible (20% width).
- Slide-text (bottom): Always visible, no overlap.
- No scrolling allowed: everything must fit within the viewport.
Current Behavior:
Content image or text gets cut off vertically/horizontally.
Aside list overflows its container.
Slide-text overlaps with main content on small screens.
Visual Reference:Here you can see that conent (image) and aside cut thebb slide text.
Question:How can I ensure the content and aside sections scale dynamically without being cut off, while keeping the slide-text fixed at the bottom?
Note: Don't be confused by the two-columns naming. These were once two pictures next to each other which I then changed to one.
.card { border-radius: 1vw; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.05); padding: 1.3% 3%; height: 100%; display: flex; flex-direction: column;}.holder { display: flex; gap: 2%; height: calc(100% - 5vh); min-height: 0;}#content { flex: 1; min-width: 0;}#aside { flex: 0 0 20%; overflow-y: auto;}.two-comuns .img-holder img { max-width: 100%; max-height: 100%; object-fit: contain;}.slide-text { height: 5vh; margin-top: auto;}<div class="card"><div class="holder"><!-- Content (80% width) --><div id="content"><h1>Title</h1><div class="two-comuns"><div class="col"><div class="img-holder"><img src="image.jpg"> <!-- Dynamic image --></div></div></div></div><!-- Aside (20% width) --><div id="aside"><ul class="list"><!-- List --></ul></div></div><!-- Slide-text --><div class="slide-text"><marquee>Scrolling text</marquee></div></div>