1

I've created a simple set of css classes that achieve the following:

  • Will take up all the space of the container provided.
  • Will allow unlimited nesting of vertical and horizontal layouts.
  • Will allow scrollable content in any section.
  • Will allow the size (width or height) of growing sections to take up the space they need and not more.
  • Allow the "growing" sections to take all available space.

My example is working in Chrome, but not in Firefox. I'm not sure if Chrome or Firefox is rendering correctly according to the spec. Either way, I'd like to find out how to achieve what is working in Chrome in all modern browsers.

Example:

https://jsfiddle.net/5a95f2a1/5/

CSS:

.some-stray-container {
  margin: 5vh 5vw;
  background: gray;
  height: 90vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
}

.content {
  padding: .5em;
}

.layout-vertical {
  align-self: stretch;
  background: #F1F1F1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.layout-vertical-section {
  background: linear-gradient(transparent, #DDDDDD);
}

.layout-vertical-section.grow {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.layout-horizontal {
  align-self: stretch;
  background: #CCCCCC;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.layout-horizontal-section {
  background: linear-gradient(90deg, transparent, #AAAAAA);
  display: flex;
  flex-direction: column;
}

.layout-horizontal-section.grow {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.layout-horizontal-section.panel {
  width: 300px;
}

.content-scroll {
  align-self: stretch;
  flex-grow: 1;
  overflow: auto;
  padding: .5em;
}
userlite
  • 479
  • 1
  • 5
  • 13
  • 1
    By default, a flex item cannot be smaller than its content. It's standard behavior defined in the spec. Chrome obviously does some sort of adjustment (at least in this case). FF follows the spec to the letter, and won't generate scroll bars because the item expands to fit all lines of content. – Michael Benjamin Mar 12 '17 at 05:20
  • 1
    You need to override the default. Add `min-height: 0` to the appropriate flex items. Since you have so many nesting levels, I just applied it to all of them. But you can remove it where necessary. https://jsfiddle.net/5a95f2a1/6/ – Michael Benjamin Mar 12 '17 at 05:21
  • 1
    Explanation in referenced question solved my problem. Thank you! – userlite Mar 12 '17 at 05:44

0 Answers0