CODEWITHSUNDEEP
htmlcssflexbox
Srinivas Sarda
Srinivas Sarda

Reputation: 59

Adding a Scroll bar to flexbox with overflowing content

I'm trying to have a div that scrolls which is contained within a flex element that's expanded to fill the page.

In my code, the column2 will have lengthy content so we need to have individual scrolls for each column.

This is my current structure:

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  min-height: 100%;
}

BODY.screen-layout-body {
  overflow: hidden;
}

.flex.two-col-main-sidebar {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-right: 0;
}

.flex.layout-content-default {
  width: 100.0%;
  min-width: 0;
  max-width: none;
  display: flex;
  flex-flow: column wrap;
}

.layout-content-default {
  width: 100.0%;
  min-width: 0;
  max-width: none;
  display: block;
}

.content {
  white-space: normal;
}

.content-item {
  vertical-align: top;
  display: block;
  margin: 0.0px 0 14.0px 0px;
  width: 100.0%;
  padding: 0 0.0px 0 0.0px;
}

.two-col-main-sidebar>.column-1 {
  margin: 0;
  float: left;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: block;
  padding-right: 0.0px;
}

.flex.two-col-main-sidebar>.column-1 {
  margin: 0;
  padding-left: 0;
  position: static;
  float: none;
  padding-right: 0.0px;
  flex: 1 1 0%;
}

.two-col-main-sidebar>.column-2 {
  margin: 0 -100% 0 0;
  float: left;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 300.0px;
}

.flex.two-col-main-sidebar>.column-2 {
  margin: 0;
  position: static;
  float: none;
  flex: 0 0 300.0px;
}
<html>

<body class="screen-layout-body with-fixed-header">
  <div class="header">Header</div>
  <div class=" flex content layout-content-default two-col-main-sidebar">
    <div class="content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content</div>
    <div class="content-item content-layout column-2">Column2 which will be 30% of screen</div>
  </div>
</body>
<html>

Note: What ever the CSS classes are here, generated by tool we cannot modify them, additionally we can add more classes to any of the div's to make it work.

Upvotes: 1

Views: 976

Answers (1)

Yvonne Aburrow
Yvonne Aburrow

Reputation: 2728

Your version is breaking because you have column-1 set to width: 100%.

You can specify the styles without all the nested selectors, too (makes the code simpler to maintain).

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  min-height: 100%;
}

.screen-layout-body {
  overflow: hidden;
}

.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-right: 0;
}

.content {
  white-space: normal;
}

.content-item {
  vertical-align: top;
  display: block;
  margin: 0 0 14px 0;
  padding: 0;
}

.header {
  background-color: #444;
  color: #fff;
  width: 100%;
  padding: 1em;
  }
  
.column-1 {
  width: 70%;
  height: 95vh;
  overflow: auto;
  box-sizing: border-box;
  background-color: #eee;
  }
    
.column-2 {
  width: 30;
  height: 95vh;
  overflow: auto;
  background-color: #ccc;
  box-sizing: border-box;
  }
<html>

<body class="screen-layout-body with-fixed-header">
  <div class="header">Header</div>
  <div class=" flex content layout-content-default two-col-main-sidebar">
    <div class="content-item content-layout column-1">Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content. Column1 which will be 70% of screen. I need to add scroll bar to this div which will overflow content.</div>
    <div class="content-item content-layout column-2">Column2 which will be 30% of screen</div>
  </div>
</body>
<html>

Upvotes: 2

Related Questions