How to be able to scroll an overlayed div inside a flex box (CSS)?

KenPx

I have an application layout with 2 nav bars and a content are with 3 main sections, a left panel, a main panel and a right panel. The easiest way I have found for the panels is to use a flex box. However, in the left panel I have a stepped workflow which has a the steps overlayed on top of the progress bar. The problem is if you make the browser too small the overflow kicks in, a scrollbar appears but the progress bar does not scroll. Please help!

Here is the jsfiddle... https://jsfiddle.net/dpkxzgv9/1/

HTML:

    <div class='ngcds-container'>
    <div class='ngcds-navbar'>Primary navigation bar</div>

  <div class='ngcds-secondary-navbar'>Secondary navigation bar</div>

    <div class='ngcds-body ngcds-body-top'>
        <div class='ngcds-content'>
      <div class='ngcds-left-panel workflow-side-panel'>
        <div id='divWorkflowBar' class='workflow-bar'>
          <div id='divWorkflowBarProgress' class='workflow-bar-progress' style='height: 50%'>
          </div>
        </div>

        <div id='workflow-items' class='workflow-items'>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 1</div>
          </div>
          <br>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 2</div>
          </div>
          <br>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 3</div>
          </div>
          <br>
          <div class='workflow-item selected'>
            <div id='divWorkflowCircle' class='workflow-circle selected'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle selected'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text selected'>Step 4</div>
          </div>
          <br>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 5</div>
          </div>
          <br>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 6</div>
          </div>
          <br>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 7</div>
          </div>
        </div>
      </div>

      <div class='ngcds-main-panel'>
        main panel
      </div>

      <div class='ngcds-right-panel'>
        right side panel
      </div> 
    </div>
    </div>
</div>

CSS:

html,
body {
    min-height: 100%;
    min-width: 600px;
}

.ngcds-container {
    height: 100%;
    width: 100%;
}

.ngcds-body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  left: 0;
    bottom: 0;
}

.ngcds-body-top {
    top: 110px;
}

.ngcds-navbar {
    background-color: #276193;
    color: white;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  padding: 5px;
  box-sizing: border-box;
    z-index: 2;
}

.ngcds-secondary-navbar {
    background-color: #068CC1;
    color: white;
    height: 70px;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
  padding: 5px;
  box-sizing: border-box;
    z-index: 1;
}

.ngcds-content {
  display: flex;
    flex: auto;
}

.ngcds-left-panel {
  order: 1;
  background: #3E4B52;
  color: white;
  flex: 0 0 auto;
}

.ngcds-main-panel {
  padding: 10px;
  flex: 1;
  order: 2;
  font-size: 24px;
  overflow: auto;
}

.ngcds-right-panel {
  padding: 5px;
  background: #3E4B52;
  color: white;
  order: 3;
  flex: 0 0 auto;
}

.workflow-side-panel {
  overflow-y: auto;
  box-sizing: border-box;
}

.workflow-bar
{
  position: absolute;
  top: 63px;
    background: #4D595F;
    height: calc(100% - 126px);
    width: 20px;
    margin: 10px 0px 0px 5px;
    margin: 0px 0px 0px 31px;
  z-index: 0;
}

.workflow-bar-progress
{
  position: relative;
    background: #068CC1;
    width: #068CC1;
}

.workflow-items {
  padding: 0;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.workflow-item {
    width: 100%;
  height: 66px;
    cursor: pointer;
  border-right: 10px solid #3E4B52;
  box-sizing: border-box;
  z-index: 2;
}

.workflow-item.selected {
    border-right: 10px solid #068CC1;
}

.workflow-item:first-child {
    margin-top: 31px;
}

.workflow-item:last-child {
    margin-bottom: 31px;
}

.workflow-circle {
    float: left;
  width: 40px;
  height: 40px;
  margin-top: 12px;
  margin-left: 20px;
  background: #4D595F;
  border: 1px solid #666666;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.workflow-circle.done
{
    background: #068CC1;
    border: 1px solid #6B9EB6;
}

.workflow-circle.selected
{
    background: #068CC1;
    border: 1px solid #9ADDF7;
  opacity: 1.00;
}

.workflow-inner-circle {
  width: 18px;
  height: 18px;
  margin: 11px 0px 0px 11px;
  background-color: #697277;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.workflow-inner-circle.done {
  background-color: #9ADDF7;
  opacity: 0.70;
}

.workflow-inner-circle.selected {
  background-color: #9ADDF7;
  opacity: 1.00;
}

.workflow-text {
  float: left;
  height: 66px;
  margin-left: 15px;
  margin-right: 10px;
  line-height: 66px;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  opacity: 0.80;
}

.workflow-text.done {
  font-weight: normal;
  opacity: 1.00;
}

.workflow-text.selected {
  font-weight: 600;
  opacity: 1.00;
}
Nandita Sharma

Add position: relative; to ngcds-left-panel workflow-side-panel div. It should work as expected.

Updated fiddle

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してくださいdebugcn@gmail.com

編集
0

コメントを追加

0

関連記事

分類Dev

Bounding box/boxes inside a div

分類Dev

How to show/hide div element after dynamically loading options in select box inside these div's?

分類Dev

SVG inside flex misaligned when wrapped in div

分類Dev

Animate scroll to hash inside div not working

分類Dev

How to center vertically an image using flex box?

分類Dev

Is it possible to extract only the visible contents of a scroll-able div?

分類Dev

How to get 100% height from the parent DIV to child DIV using CSS flex

分類Dev

How to horizontally align CSS :hover buttons inside a centered parent div?

分類Dev

Post input Box value inside div in php

分類Dev

Problem positioning box item inside a CSS Grid

分類Dev

CSS Flex-box-包含长文本的裁切框

分類Dev

Vertical overflow inside a flex-grow div in bootstrap 4

分類Dev

CSS - Problem of blured div inside a blured div

分類Dev

Inside div my scroll bar is showing but can't use it (not working)

分類Dev

How to make div with round corner totally opaque inside, but colored outside (between round border line and original border-box line)?

分類Dev

How to Reduce Space in DIV using Using Flex

分類Dev

How to move a div depending on scroll percentage

分類Dev

Flex box stacking

分類Dev

How to pop out an image inside a ul li div when the css surrounding it won't let you

分類Dev

Button CSS transition does not work inside a DIV

分類Dev

cssとflexを使用したdivの配置

分類Dev

How to disable select box hover color on css

分類Dev

CSS Flex Box が正しく整列しない

分類Dev

How to center a form element (search box) inside of Bootstrap navbar?

分類Dev

How can I make a table inside my shiny box with RandomIcon()

分類Dev

How to ng-translate inside select box option in angularjs

分類Dev

How to use ASP Controls inside a jQuery Dialog box ?

分類Dev

How to display html as text inside EXTJS combo box

分類Dev

How to scroll a div when ajax is used to load data in python selenium

Related 関連記事

  1. 1

    Bounding box/boxes inside a div

  2. 2

    How to show/hide div element after dynamically loading options in select box inside these div's?

  3. 3

    SVG inside flex misaligned when wrapped in div

  4. 4

    Animate scroll to hash inside div not working

  5. 5

    How to center vertically an image using flex box?

  6. 6

    Is it possible to extract only the visible contents of a scroll-able div?

  7. 7

    How to get 100% height from the parent DIV to child DIV using CSS flex

  8. 8

    How to horizontally align CSS :hover buttons inside a centered parent div?

  9. 9

    Post input Box value inside div in php

  10. 10

    Problem positioning box item inside a CSS Grid

  11. 11

    CSS Flex-box-包含长文本的裁切框

  12. 12

    Vertical overflow inside a flex-grow div in bootstrap 4

  13. 13

    CSS - Problem of blured div inside a blured div

  14. 14

    Inside div my scroll bar is showing but can't use it (not working)

  15. 15

    How to make div with round corner totally opaque inside, but colored outside (between round border line and original border-box line)?

  16. 16

    How to Reduce Space in DIV using Using Flex

  17. 17

    How to move a div depending on scroll percentage

  18. 18

    Flex box stacking

  19. 19

    How to pop out an image inside a ul li div when the css surrounding it won't let you

  20. 20

    Button CSS transition does not work inside a DIV

  21. 21

    cssとflexを使用したdivの配置

  22. 22

    How to disable select box hover color on css

  23. 23

    CSS Flex Box が正しく整列しない

  24. 24

    How to center a form element (search box) inside of Bootstrap navbar?

  25. 25

    How can I make a table inside my shiny box with RandomIcon()

  26. 26

    How to ng-translate inside select box option in angularjs

  27. 27

    How to use ASP Controls inside a jQuery Dialog box ?

  28. 28

    How to display html as text inside EXTJS combo box

  29. 29

    How to scroll a div when ajax is used to load data in python selenium

ホットタグ

アーカイブ