1

I have a layout, which allows me to have scroll appears on content-block with sticky dynamicaly sized header and footer. Wrapper height is set to 100vh to make it work, but when left or right column expands in its content, the height of the column stays the same as viewport height.

Fiddle - https://jsfiddle.net/vladllen/urd2g36w/3/.

    .wrapper {
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-y: hidden;
      flex: 1;
    }
    
    .header {
      background: red;
    }
    
    .footer {
      background: blue;
    }
    
    .content {
      flex: auto;
      overflow-y: auto !important;
      display: flex;
      flex-direction: row;
    }
    
    .left {
      background: yellow;
      width: 70%;
    }
    .right {
      width: 30%;
      background-color: green;
    }
<div class="wrapper">
      <div class="header">
        <button class="add-btn">Add</button>
      </div>
      <div class="content">
        <div class="left">
          <button class="add-btn">Add</button>
          <h1>left</h1>
        </div>
        <div class="right">
          <button class="add-btn">Add</button>
          <p>right</p>
        </div>
      </div>
      <div class="footer">
        <button class="add-btn">Add</button>
      </div>
    </div>

When there is one column layout, there is no such problem. Fiddle - https://jsfiddle.net/vladllen/v6cw2q7a/1/.

    .wrapper {
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-y: hidden;
      flex: 1;
    }
    
    .header {
      background: red;
    }
    
    .footer {
      background: blue;
    }
    
    .content {
      background: yellow;
      flex: auto;
      overflow-y: auto !important;
    }
    <div class="wrapper">
      <div class="header">
        <button class="add-btn">Add</button>
      </div>
      <div class="content">
        <button class="add-btn">Add</button>
        <h1>title</h1>
      </div>
      <div class="footer">
        <button class="add-btn">Add</button>
      </div>
    </div>

Is there any possible way to set children elements (.left and .right) to have height: auto (to have content height), when they are inside parent with 100vh, with pure css (and extra html)?

I could only think of javascript way, when dynamicaly calculate the content height and set heigth to this number.

Dhana D.
  • 1,670
  • 3
  • 9
  • 33
vladllen
  • 11
  • 2
  • In your first example (the one with the problem) the content sections are nested in a flex item container. In your second example, the content element isn't nested in a sub-container. That's the reason for the difference. See this post for additional guidance: [Make background color extend into overflow area](https://stackoverflow.com/q/45497031/3597276) – Michael Benjamin Dec 29 '21 at 01:07
  • Are you able to add extra wrapper elements to the HTML, or do you need to do this _only_ with CSS? – Brandon Dec 29 '21 at 01:20
  • @Brandon yes, extra wrapper is fine, if it wont break the layout – vladllen Dec 29 '21 at 01:31

0 Answers0