0

First thing: I'm not a frontend programmer, but sometimes the only way is become one.

So I was thinking about behavior of flex or flexbox. Probably the way I use it is bad, if so, please let me know. Thanks.

To the problem:

I tried to write basic layout using flexbox, but I found a problem. Honestly I don't know if it is a bug or my expectations are too high, but I expect same behavior from these cases below.

https://jsfiddle.net/bargl_vojtech/upvb1Lgk/7/
https://jsfiddle.net/bargl_vojtech/h7eokuua/1/
https://jsfiddle.net/bargl_vojtech/q0kegr8o/1/

They are similar, but if you look closer, you can see change in main and #inside-main in css and #wrapper in html

Simple info:

  • main - part of view
  • #main-header - header for content (example: fixed title)
  • #main-content - scrollbox
  • #inside-main - endless content

I expect second case to be just like first case in behavior, can someone tell me why it is not same?

Thanks for reply.

My expectation: main has flex: 1, so it should be resize to rest of parent size, but somehow #inside-main tells #main-content to resize itself (because it expected in most cases... bigger inner div should resize smaller parent div to same size), and because #main-content is now bigger than its parent it resize him, and so on, but should not this be ignored by overflow: hidden/scroll?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
vbargl
  • 649
  • 8
  • 13

1 Answers1

3

Flex items, by default, cannot shrink below the size of their content. That's why your content element is overflowing the container.

The initial setting on flex items is min-height: auto (in column container) and min-width: auto (in row container).

To override these defaults use min-height: 0, min-width: 0, or overflow with any value except visible.

Add this to your code:

main {
  background-color: red;
  flex: 1;
  overflow-y: auto; /* NEW */
}

For a complete explanation see these posts:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701