0

I have a nested set of flexboxes, mostly passing on identical size downwards. In the innermost flexbox, there is an image. If that image is too long along any axis, I want scrollbars on the innermost (purple) box.

enter image description here

I learned already how to prevent overshooting along the main axis (link 1, link 2). Basically

flex: auto;
width: 0;
overflow: auto;

But I have no Idea, how to limit along the sizing cross-axis. (Note: cross-axis is vertical here. Green and blue box have a horizontal main axis as their (default) flex-direction is 'row'.)

https://codepen.io/fnocke/pen/BayNPJq?editors=1100

Frank N
  • 9,625
  • 4
  • 80
  • 110
  • add `min-height: 0;` to `.one, .two` – Temani Afif Dec 05 '19 at 19:26
  • Thank you. There are actually 3 different solutions (). – Frank N Dec 06 '19 at 09:00
  • Btw: I found closing right away as "duplicate" a bit harsh: The linked question (and single answer) certainly has good pointers (focussing on ”main axis”, not necessarily cross axis) but does not provide a specific answer for my scenario (a mix of main and cross axes in a nested scenario with a flex-directional change within). I think, as such it does deserve an own answer. (Or else we could just close any scenario-specific-question here and point to some W3C document, some webpack documentation, some...) – Frank N Dec 06 '19 at 09:01
  • *but does not provide a specific answer for my scenario* --> a duplicate is never meant to provide a *sepcific* answer. A duplicate is a generic/canonical question that deals with the same issue and it's up to you to find the needed answer/code to your question based on the knowledge provided by the duplicate. You are having an issue with min-height/min-width constraint and the duplicate explain that issue which is the missing piece of puzzle – Temani Afif Dec 06 '19 at 09:04
  • I respectfully disagree. – Frank N Dec 06 '19 at 09:11

1 Answers1

1

Put height: 100%; to .one, .two so your flex elements will only get the available space in height

(Addition by Questioner.)

Interesting, there appear to be 3 solutions to this:

1) to .one add (also to .two won't hurt, and probably a good idea recalling IE-crossbrowser-issues)

min-height: 0;

2) to both .one, .two add:

height: 100%;

3) to .one add (also to .two won't hurt. Won't truncate borders on children btw (which is a good sign), still all properly visible on all edges)

overflow: hidden;

Imho (1) is the "cleanest" solution... (as it fixes the root cause, probably also the safest bet against cross-browser-issues)

Frank N
  • 9,625
  • 4
  • 80
  • 110
Thierry Lemaitre
  • 166
  • 8