Content overflowing parent element without explicit size

Question

I have a problem where the content of a div will overflow the parent even with max-height set to 100%. I know that this problem could be simply solved by setting an explicit height; however, this can only be done through JavaScript which is a rather ugly solution. I'd like to continue using my flexbox system to arrange the page, but I would like only the div with the content to be scroll-able. Currently, I'm not able to do this because I can't set an explicit size on the parent. Here is an example of what I am facing:

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
  display: flex;
  margin: 0;
}

.hozwrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

.sec1 {
  background: red;
  width: 50px;
  height: 100%;
}

.sec2 {
  background: lime;
  flex-grow: 1;
}

.vertwrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbox {
  height: 30px;
  background: pink;
}

.cbox1 {
  background: orange;
  height: 100%;
  
  flex-grow: 1;
  
  overflow-y: scroll;
}

.cbox2 {
  background: blue;
}

<body>
  <div class="hozwrapper">
    <div class="sec1">
      first
    </div>
    <div class="sec2">
      <div class="vertwrap">
        <div class="topbox">
          Navbar
        </div>
        <div class="hozwrapper">
          <div class="cbox1">
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
          </div>
          <div class="cbox2">
            sidebar
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

If you look at this snippet, when the content overflows it expands the body. This is the behavior I'd like to change.

Temani Afif · Accepted Answer · 2020-01-02T08:12:35.037

Adjust your code like below:

.hozwrapper {
    width: 100%;
    /* height: 100%; removed */
    display: flex;
    flex-grow: 1; /* added */
    min-height: 0; /* added (related Q: https://stackoverflow.com/q/36247140/8620333) */
}

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
  display: flex;
  margin: 0;
}

.hozwrapper {
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-grow: 1;
    min-height: 0;
}

.sec1 {
  background: red;
  width: 50px;
  height: 100%;
}

.sec2 {
  background: lime;
  flex-grow: 1;
}

.vertwrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.topbox {
  height: 30px;
  background: pink;
}

.cbox1 {
  background: orange;
  height: 100%;
  
  flex-grow: 1;
  
  overflow-y: scroll;
}

.cbox2 {
  background: blue;
}

<body>
  <div class="hozwrapper">
    <div class="sec1">
      first
    </div>
    <div class="sec2">
      <div class="vertwrap">
        <div class="topbox">
          Navbar
        </div>
        <div class="hozwrapper">
          <div class="cbox1">
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
            this is content<br>
          </div>
          <div class="cbox2">
            sidebar
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

score 0 · Answer 2 · answered Jan 02 '20 at 00:06

0

add overflow:hidden; to html,body selector

html,
body {
  width: 100%;
  height: 100%;
  background: lightblue;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  overflow:hidden; 
}

answered Jan 02 '20 at 00:06

Ayman Morsy

1,279
1
10
28

Content overflowing parent element without explicit size

2 Answers2