Html Question posted in
Some basic documentation can be found here.

Html – Content not scrolling

I have created a fiddle to demo my issue: https://jsfiddle.net/Lqpnacv7/

I am attempting to ensure that the content inside the ‘left-content’ div scrolls when the content exceeds the parent hight.

However for some reason the scrolling content is exceeding its parents height.

Any help on this is much appreciated

      <div class="main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class="content-container">
            <div class="content-left">
              <div class="scrolling-content">Scrolling Content</div>
            </div>
            <div class="content-right">2</div>
          </div>
          <div>Footer</div>
    </div>





  .main-container{
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: red;
    }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow: scroll;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}
Tags:

2

Answers


  1. 0

    Your problem is that the content is overflowing the container, but the conainer doesn’t have a fixed height. So the container is not overflowed: the container is overflowing the parent.
    Looking at the following snippet, the main container is marked with overflow: hidden to prove that the yellow container gets cropped

      .main-container{
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: red;
        overflow: hidden;
    }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow: scroll;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}
          <div class="main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class="content-container">
            <div class="content-left">
              <div class="scrolling-content">Scrolling Content</div>
            </div>
            <div class="content-right">2</div>
          </div>
          <div>Footer</div>
    </div>

    Here’s the fix:

    .main-container{
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: red;
  }

.content-container{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    height: 100%;
}
.content-container > div{
    flex:1;
}
.content-left{
    overflow-y: scroll;
    height: fit-content;
}
.scrolling-content{
    height: 1000px;
    background-color: yellow;
}
    <div class="main-container">
          <div>Navgation</div>
          <div>Notification Bar</div>
          <div class="content-container">
            <div class="content-left">
              <div class="scrolling-content">Scrolling Content</div>
            </div>
            <div class="content-right">2</div>
          </div>
          <div>Footer</div>
    </div>
    Login or Signup to reply.
  2. 0

    You need to define height for all parent containers and the left container itself, similar to my example below. Otherwise the contains will adapt to the height of their content/child containers.

    Apart from that, don’t use overflow: scroll, but overflow: auto instead, otherwise you’ll always get both a vertical and a horizontal scrollbar, even if it’s not needed.

    .main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.content-container {
  height: calc(100% - 2.4em);
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.content-container>div {
  flex: 1;
}

.content-left {
  height: 100%;
  overflow: auto;
}

.scrolling-content {
  height: 1000px;
  background-color: yellow;
}
    <div class="main-container">
  <div>Navgation</div>
  <div>Notification Bar</div>
  <div class="content-container">
    <div class="content-left">
      <div class="scrolling-content">Scrolling Content</div>
    </div>
    <div class="content-right">2</div>
  </div>
  <div>Footer</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search