1

i try make 100% height page with flex. Then few items , looks like all very good:

enter image description here

Then i add more items in list , div_content height out bottom browser and appearas page scroll

enter image description here

If i add overflow-y: scroll for item list its dont help ... how can fix this ?

enter image description here

SANDBOX: https://liveweave.com/9bGsqj (press f5 after loading)

padavan
  • 714
  • 8
  • 22

1 Answers1

1

Most likely, you just need to change 100% to 100vh, and the issue will be solved, usually it's happening because of different parent height properties. enter image description here enter image description here Also this problem widely explained here: Why doesn't height: 100% work to expand divs to the screen height?

Also, try to think in relatedness way, I did not found something that really will help to understand, at least MDN explanation is not bad and with some examples https://developer.mozilla.org/en-US/docs/Web/CSS/overflow enter image description here

matthew5
  • 56
  • 8
  • then i try change % to 100vh , then i get bottom out with items and without (i think 100vh dont consider div_menu) – padavan Jun 04 '20 at 19:06
  • its hard to say why are you still have problem so, would be very helpful to see structure and full picture of what is going on, can you post to fiddle? – matthew5 Jun 04 '20 at 19:11
  • I see, but what about your example? i see there only

    Hello Weaver!

    . Edited: okay, i see its changed, one moment     – matthew5 Jun 04 '20 at 20:21
  • its should work: https://liveweave.com/9bGsqj (press f5 after loading) – padavan Jun 04 '20 at 20:26
  • okay, just add "overflow-y: auto" to
    , i think its because after you applied "overflow: hidden", its applied to all inner divs too     – matthew5 Jun 04 '20 at 20:28
  • yes its work. But i dont understand how its magic work (flex+overflow), where i can read about it ?. Why need apply to "content"?. And i try move overflow:scroll from column to itemList(without button) not work :( – padavan Jun 05 '20 at 07:09
  • Actually, this is not problem of flex, if you will "display: block" and make appropriate height, you will get same problem you just need to play with overflow: auto and overflow: hidden and try to gei it, it will take sometime, but without practice you very possibly won;t get it.So made for you some screenshot with explanation, hope it will help you understand at least idea of it, if not, ask me more) – matthew5 Jun 05 '20 at 08:13