0

As i understand vh unit is related to view-port not document content.but when i used it with flex container it behave strange like in following example.

  1. Run code snippet and open Full page mode.
  2. resize browser window height 150px.
  3. footer section overflow and we cant see it with scroll.
  4. edit .box height:100vh to min-height:100vh.
  5. every thing is now fine we can scroll till end no overflow.

now is vh unit with min-height property also respect to document content. while vh unit with height only consider view-port height not document content. what is reason behind it?

note: this happen with flex container not with block formatting also not sure about grid.

code used from following answer on stack-overflow.

html, body {
  margin: 0;
}
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* if min-height:100vh is used then problem is solved we can fully scroll the box   content and overflow is not happen */
  background-size: cover;
  background: black url(http://lorempixel.com/500/500/nature/4/) no-repeat center;
}
.box .row.content,
.content .one-fifth.column {
  flex: 1;                
  display: flex;
}

.box .row.header,
.box .row.footer { color: white; }
.box .row.content { background: #fff; }
.yellow-back { background: #ffe001; }
.red-back { background: #e31e25; }
.green-back { background: #66af45; }
.purple-back { background: #954294; }

@media screen and (max-width: 600px) {
  /* smaller screens */
  .box .row.content {
    flex-direction: column
  }
}
<div class="box">
  <div class="row header">
    <p><b>header</b><br /><br />(sized to content)</p>
  </div>

  <div class="row content">
    <div class="one-fifth column green-back">Here</div>
    <div class="one-fifth column red-back">Here</div>
    <div class="one-fifth column">Here</div>
    <div class="one-fifth column yellow-back">Here</div>
    <div class="one-fifth column purple-back">Here</div>
  </div>

  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>
Braiam
  • 1
  • 11
  • 47
  • 78
user2022
  • 13
  • 6
  • height sets a fixed height , If the content exceeds the height of the parent, it will overflow the parent and will not stretch it . If you set a min-height, the container will not be less than this value, but will be able to grow if the content needs more space. About flex and min-size . if the flexbox is not set to flex-wrap, it will try to resize elements so it fits inside . From a child, the flex-shrink value can also be reset to avoid the flexbox to shrink it. Your code works as expected, if you need another behavior, reset some flex rules to match your needs ;) – G-Cyrillus Apr 29 '22 at 07:37
  • Most likely not a question, just normal behave. I vote to close – MaxiGui Apr 29 '22 at 07:39
  • @G-Cyrillus thank you so much. last question default overflow value is visible then why scrollbar is created when resizing browser window to setting it smaller – user2022 Apr 29 '22 at 07:55
  • this is your footer showing up (color is set to white BTW) . it stands outside box being itself set to height:100vh. html shows a scrollbar to reach the footer – G-Cyrillus Apr 29 '22 at 08:01
  • @G-Cyrillus sir html overflow default value also visible then how it shows scrollbar. – user2022 Apr 29 '22 at 08:10
  • @G-Cyrillus i set border on HTML to verify it also overflow the HTML then whom is responsible for scrollbar – user2022 Apr 29 '22 at 08:12
  • html overflow default is set to overflow:auto else every webpage would not be scrollable. From a browser to another the scrollbar can be shown from html or body , but basicly, values are set to allow scrolling if content overflows the viewport ;) – G-Cyrillus Apr 29 '22 at 08:19
  • @G-Cyrillus then why browser dev tool shows wrong value for html overflow: visible \ – user2022 Apr 29 '22 at 08:26
  • It obviously is sort of a bug and not applied. Looking and testing for it, loads it and it suddenly gets applied and result is quiet a mess https://jsfiddle.net/qL1fzdsu/ feel free to run this in a few browsers and copy/paste the code into standalone html page if you wish. Indeed if overflow is not set, default value is visible, but the browsers works here otherwise to allow you scroll to the contents overflowing. – G-Cyrillus Apr 29 '22 at 08:48

0 Answers0