CSS Problems using vh and vw with FlexBox

Question

I want to build a panel with its main content (PAGE CONTENT) and a right sided stacked command button list with a title. The whole page must shrink or grow depending on the viewport (this will be used on a touch tablet, so landscape/portrait view needs to resize all elements proportionally).

Here is my HTML code snippet:

.panel-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 0px;
}

.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}

.panel-container-right {
  justify-self: flex-end;
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

I can't make the right panel work properly. What I need is to keep all the buttons of same size, and same size of the panel title and panel button. If the height of the stacked buttons increase, I need then to scroll-y, but never go out of screen boundaries or loose its proportional size compared to the title and panel button.

Currently the panel buttons are shrinking to keep all 10 buttons in view, where I wanted an y-scroll with buttons at the same size of the panel button.

Can your create a snippet from your code right here in your question? That is the preferred way. External code sites should only be used if the required snippet functionality is not available on StackOverflow itself. — connexo, Aug 30 '18 at 11:17
"The whole page must shrink or grow depending on the viewport (this will be used on a touch tablet, so landscape/portrait view needs to resize all elements proportionally)." Have a feeling you need to go media queries for this one.. — Raymond Nijland, Aug 30 '18 at 11:23

score 1 · Accepted Answer · answered Aug 30 '18 at 11:30

I have documented all changes in the CSS. Hope this helps.

.panel-container {
  width: 100%;
  display: flex;
  /* flex-direction: row; NOT NECESSARY, IS THE DEFAULT */
  padding: 0px;
  margin: 0px;
}

/* NOT NECESSARY
.panel-container-left {
  flex-grow: 1;
  flex-shrink: 0;
}
*/

.panel-container-right {
  /* justify-self: flex-end; THIS DOES NOT EXIST */
}

.title {
    background-color: grey;
    color: white;
    margin: 5px;
    width: 25vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked {
    /* display: flex; 
    flex-direction: column; */
    width: 100%;
    height: 80vh; /* TITLE IS 10VH + A BIT EXTRA FOR THE EFFECT */
    overflow-y: scroll;
}

.button {
  background-color: blue;
  color: white;
  margin: 5px;
  width: 25vw;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="panel-container">
  <div class="panel-container-left">
    PAGE CONTENT
    <div class="button">
      Button Page
    </div>
  </div>
  <div class="panel-container-right">
    <div class="title">
      TITLE
    </div>
    <div class="stacked">
    <div class="button">
      Button 1
    </div>
    <div class="button">
      Button 2
    </div>
    <div class="button">
      Button 3
    </div>
    <div class="button">
      Button 4
    </div>
    <div class="button">
      Button 5
    </div>
    <div class="button">
      Button 6
    </div>
    <div class="button">
      Button 7
    </div>
    <div class="button">
      Button 8
    </div>
    <div class="button">
      Button 9
    </div>
    <div class="button">
      Button 10
    </div>
    </div>
  </div>
</div>

What solved the issue is removing the `display: flex` from stacked... I can't understand why, as I'm opening a new `div section` as the parent section... — Mendes, Aug 30 '18 at 11:42
@Mendes Take a look here: https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api — Gerard, Aug 30 '18 at 11:46

Gifron · Answer 2 · 2018-08-30T11:28:07.277

0

If I got this right, you should try to set max-width of right panel to 100vh and then add overflow-y to scroll.

.panel-container-right {
  max-height: 100vh;
  overflow-y: scroll;
}

edited Aug 30 '18 at 11:28

answered Aug 30 '18 at 11:25

Gifron

96
1
8

CSS Problems using vh and vw with FlexBox

2 Answers2