Text increasing column instead of overflowing with scroll-CodePudding

I am trying to make text overflow in one of my columns, I've added overflow-y to auto, but for some reason the text keeps increasing my page instead adding scroll. The parent element is stretched to fill the rest of the page with flex: 1. What am I doing wrong?

.test {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

header {
  border: 1px solid red;
}

.c-container {
  display: flex;
  flex: 1;
}

.col-1 {
  width: 50%;
  background: green;
  overflow-y: auto;
}

.col-2 {
  width: 50%;
  background: yellow;
}

<div >
  <header>
    Hello
  </header>

  <div >
    <div >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
      molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
      numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
      optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
      obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
      nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
      tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
      quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
      sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
      recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
      minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
      quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur
      fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
      consequuntur! Commodi minima excepturi repudiandae velit hic maxime
      doloremque. Quaerat provident commodi consectetur veniam similique ad
      earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
      fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
      suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
      modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
      totam ratione voluptas quod exercitationem fuga. Possimus quis earum ve
    </div>
    <div >

    </div>
  </div>

</div>

CodePudding user response：

You can do this with CSS grid and simplified markup, take a look at the solution below

/* START: NOT RELEVANT TO ANSWER */ body { margin: 0 } .container { background: blue } header { border: 1px solid red } .col-1 { background: green } .col-2 { background: yellow } /* END: NOT RELEVANT TO ANSWER */


/* START: ANSWER */
.container {
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head head"
    "col1 col2";
    
  max-height: 100vh;
}

header { grid-area: head }
.col-1 { grid-area: col1 }
.col-2 { grid-area: col2 }

.col {
  min-height: 0;
  overflow: auto;
}

<div >
  <header>Hello</header>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum ve
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </div>
</div>

CodePudding user response：

For the overflow property to work, you need to explicitly set the height or width property to the container with overflow property. I have added 100px height to the container for the demo below.

Edit: Since your parent container has an explicit height of 100vh, the child container's height in percentage will be relative to it and hence will have an explicit height. So I have set the .c-container's height to 100%.

.test {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: blue;
  }
  
  header {
    border: 1px solid red;
  }
  
  .c-container {
    display: flex;
    flex: 1;
    height: 100%
  }
  
  .col-1 {
    width: 50%;
    background: green;
    overflow-y: auto;
  }
  
  .col-2 {
    width: 50%;
    background: yellow;
  }

<div >
  <header>
    Hello
  </header>

  <div >
    <div >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
      molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
      numquam blanditiis haru
      Hello
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum vevoluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum ve Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem qm quisquam eius sed odit fugiat iusto fuga praesentium
      optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
      obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
      nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
      tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
      quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
      sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
      recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
      minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
      quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur
      fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
      consequuntur! Commodi minima excepturi repudiandae velit hic maxime
      doloremque. Quaerat provident commodi consectetur veniam similique ad
      earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
      fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
      suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
      modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
      totam ratione voluptas quod exercitationem fuga. Possimus quis earum ve
    </div>
    <div >

    </div>
  </div>

</div>