CSS flex filling 100% of vertical space-CodePudding

There is a layout, the scroll is disabled for the parent element and the height is set to 100%.

<https://codepen.io/cefiro/pen/LYBjBmm>

In order for flex to fill 100% of the vertical space, you need to remove "height: 100%" from the parent tags. But I can't do this, because scrolling is disabled for the parent elements and enabled in the child with the ".content" class

Problem

If there is a way around this without changing the HTML layout markup?

html, body, .app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app {
  display: flex;
  flex: 1 1 auto;
  max-height: 90%;
  max-width: 90%;
}

.sidebar {
  background: green;
  width: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sidebar .logo {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
}
.sidebar .logo > span {
  border: 1px solid #fff;
  border-radius: 50%;
  width: 1em;
}
.sidebar .menu {
  flex: 1 0 auto;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.main {
  display: flex;
  flex-direction: column;
  background: gray;
  width: 100%;
}
.main .top-bar {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: pink;
}
.main .content {
  display: flex;
  overflow: auto;
}
.main .content .left-side {
  flex: 0 0 10em;
  background: orange;
  margin-right: 2em;
}
.main .content .right-side {
  flex: 1 0 auto;
  background: white;
  min-width: 110%;
}

<html>
  <head></head>
  <body>
    <div >
      <div >
        <div ><span>L</span></div>
        <div >menu items</div>
      </div>
      <div >
        <div >TOP BAR</div>
        <div >
          <div >
            Left Side Area
          </div>
          <div >
            Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

Is this what you're looking for? I've changed the height of the content to 100% to fill the container then used overflow-y scroll on the right side to give you the scroll bar for this element only. The min-width:110% on your right side wasn't doing anything other than overflowing your content and adding an x scrollbar so I've removed it. Your content doesn't overflow in to your gray section now. Marked up css below:

If it's not what you're looking for then pop me a comment and I'll tweak accordingly.

html,
body,
.app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app {
  display: flex;
  flex: 1 1 auto;
  max-height: 80%;
  max-width: 50%;
}

.sidebar {
  background: green;
  width: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sidebar .logo {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
}

.sidebar .logo>span {
  border: 1px solid #fff;
  border-radius: 50%;
  width: 1em;
}

.sidebar .menu {
  flex: 1 0 auto;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.main {
  display: flex;
  flex-direction: column;
  background: gray;
  width: 100%;
}

.main .top-bar {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: pink;
}

.main .content {
  display: flex;
  height: 100%;   /* added this */
  overflow: auto;
}

.main .content .left-side {
  flex: 0 0 10em;
  background: orange;
  margin-right: 2em;
}

.main .content .right-side {
  flex: 1 0 auto;
  background: white;
  /*min-width: 110%;*/
  overflow-y: scroll;   /* added this */
}

<div >
  <div >
    <div ><span>L</span></div>
    <div >menu items</div>
  </div>
  <div >
    <div >TOP BAR</div>
    <div >
      <div >
        Left Side Area
      </div>
      <div >
        Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area
        <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right
        Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br
        /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side
        Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br />
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I found a solution with a small change in the layout

Added the ".content-inner" tag after the ".content" tag

.main .content .content-inner {
  display: flex;
  flex: 1;
  height: fit-content;
}

Snippet edited. It is fully working..

html, body, .app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.app {
  display: flex;
  flex: 1 1 auto;
  max-height: 90%;
  max-width: 90%;
}

.sidebar {
  background: green;
  width: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sidebar .logo {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
}
.sidebar .logo > span {
  border: 1px solid #fff;
  border-radius: 50%;
  width: 1em;
}
.sidebar .menu {
  flex: 1 0 auto;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.main {
  display: flex;
  flex-direction: column;
  background: gray;
  width: 100%;
}
.main .top-bar {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: pink;
}
.main .content {
  display: flex;
  overflow: auto;
}
.main .content .content-inner {
  display: flex;
  flex: 1;
  height: fit-content;
}
.main .content .left-side {
  flex: 0 0 10em;
  background: orange;
  margin-right: 2em;
}
.main .content .right-side {
  flex: 1 0 auto;
  background: white;
  min-width: 110%;
}

<html>
  <head></head>
  <body>
    <div >
      <div >
        <div ><span>L</span></div>
        <div >menu items</div>
      </div>
      <div >
        <div >TOP BAR</div>
        <div >
          <div >
              <div >
                Left Side Area
              </div>
              <div >
                Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br /> Right Side Area <br />
              </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>