0

I have a chat system with a very simple header-body-footer layout, except the body needs to be scrollable. I've been trying to come up with a non-hacky (fixed heights for each viewport) solution and this was the final result, which happened entirely by accident:

  flex-basis: auto;
  overflow-y: scroll;
  height: 1px;

It works perfectly across all resolutions, the body takes as much space as it can and the rest of it scrolls as intended. The problem is that i don't really understand this solution, shouldn't flex-basis: auto be sufficient for this calculation to happen? why do i have to set a height?

I've set it as 1px because if height is a value higher than the space available, height takes precedence over flex height.

Selhar
  • 136
  • 2
  • 10

1 Answers1

0

[flex-basis] defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.

It is likely because when setting it to auto, it is looking for the width or height property, which is otherwise unset.

For more information on flexbox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you would like the container to grow to the space allocated without defining a set height / width, you can always use flex-grow.

[flex-grow] defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Matthew Varga
  • 405
  • 4
  • 14
  • Thansk for taking the time to answer! I've tried flex-grow, however it didn't work as intended. – Selhar Feb 08 '19 at 17:14
  • One thing to keep in mind with flex-grow is that the element will only grow to how much space the parent allows, so for example having the page height set at 100% even if there isn't enough content to fill it. An example can be seen here: https://jsfiddle.net/Matthew_/90gLy6nw/6/ – Matthew Varga Feb 08 '19 at 18:07
  • That's the initial problem though, i don't want to set the height manually. Ideally the height will be calculated, i couldn't create that using flex-grow. Height 100vh isn't a valid solution, since i have to take into account the header and footer. – Selhar Feb 08 '19 at 18:21
  • if you take a look at the fiddle I posted, the content body doesn't actually have any height set, only the html and body tag – Matthew Varga Feb 08 '19 at 18:26