0

I want to have a panel (a div) center inside a container (a div with flex display).

When the panel is small in height (just change "height: 300px" in my example CSS), it works OK. When the panel is higher ("height: 3000px") than its container, I want to be able to scroll page the whole page (Note I have "overflow-y: auto" on the body).

The issue is the container does not wrap completely the inner div. If you scroll down you can see the red stops and green overflows:

html, body {
    height: 100%;
    margin: 0;
}

body {
      overflow-y: auto;
}

.h100 {
    height: 100%;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-item-stretch {
    flex: 1 1;
}

.panel {
    height: 3000px;
    width: 300px;
    background-color: green;

}

.justify-content-center {
    justify-content: center;
}


.vscroll {
    overflow-y: auto;
}

.m-auto {
    margin: auto;
}

.container {
    background-color: red;
    padding:10px;
}
    <div class="flex-col h100">
        <div>
            <span>LOGO</span>
        </div>
        <div class="container flex-col flex-item-stretch m-auto">
            <div>Title</div>
            <div class="panel flex-item-stretch m-auto"></div>
        </div>
    </div>
Don Box
  • 3,166
  • 3
  • 26
  • 55
  • 1
    you need to add `flex-shrink: 0;` to the element `panel` – Temani Afif Nov 26 '18 at 12:44
  • @TemaniAfif Uhh, thanks but I have another issue now.... You already set my question as a duplicate, could you please remove it so I can edit the question? – Don Box Nov 26 '18 at 12:49
  • first edit your question then I will remove the duplicate if it's not a suitable one – Temani Afif Nov 26 '18 at 12:50
  • 1
    by the wat I am pretty sure you issue is related to this question : https://stackoverflow.com/questions/49278725/centered-flex-container-grows-beyond-top/49279237#49279237 – Temani Afif Nov 26 '18 at 12:54
  • @TemaniAfif OK, I edited the question. Please remove the "duplicate" mark as it doesn't answer my question. – Don Box Nov 26 '18 at 12:57
  • 1
    check the second duplicate I added and you will get your answer – Temani Afif Nov 26 '18 at 12:58
  • @TemaniAfif wow amazing, Thank you. Setting margin: auto worked. I need to try to understand why it's working like that. – Don Box Nov 26 '18 at 13:05
  • @TemaniAfif Thanks again, you rock. – Don Box Nov 26 '18 at 13:06
  • If you add a comment, I will mark it as answer. – Don Box Nov 26 '18 at 13:07
  • 1
    since it's a duplicate no need to add an answer as there is already one in the duplicate. and if you want a deep understanding you can check this answer : https://stackoverflow.com/a/33455342/8620333 – Temani Afif Nov 26 '18 at 13:10
  • For anyone else who reads this. As far as I can tell you need margin-auto on any other nested flexboxes to make it work. – Don Box Nov 26 '18 at 13:39
  • I spoke too soon. The behavior is not consistent across Chrome and Firefox. Moreover it doesn't actually work on neither on them, the container is oveflown. Please see my code. – Don Box Nov 26 '18 at 15:09
  • you didn't define any `overflow: auto;` so it's logical to have overflow – Temani Afif Nov 26 '18 at 15:17
  • I did, look at the body in CSS, it has "overflow-y: auto;" – Don Box Nov 26 '18 at 15:20
  • the body doesn't need to have overflow, you need to apply overflow to the flex container if you don't want your container to overflow ... `.container{overflow: auto;}` – Temani Afif Nov 26 '18 at 16:24
  • Please look to my description. I want the whole page to be scrollable. – Don Box Nov 27 '18 at 13:12
  • then remove `.h100`.. not sure what you are looking for, you are applying some style then you are surprised why they are like that ... you explicitely said that the red div should be height:100% so it logical that you have overflow, don't specify any height and it will be ok – Temani Afif Nov 27 '18 at 13:30
  • if I remove .h100 and the panel has a small height, how is it going to get vertically centered? – Don Box Nov 27 '18 at 15:29
  • that's why I don't know what you really want ... *you* are using style that you don't want as there is no issue everything is working fine. Probably you need `min-height:100%` ? – Temani Afif Nov 27 '18 at 15:38
  • If you don't know what I want why did you mark my question as duplicate? Doesn't make any sense – Don Box Nov 27 '18 at 16:21
  • I though I explained clearly what I want. I need a way to be able to scroll whole page when panel is tall and have the panel centered when its height is smaller than its container – Don Box Nov 27 '18 at 16:22
  • read your own comments and you will understand why I marked as duplicate. you clearly said by yourself that everything was ok so ask yourself. – Temani Afif Nov 27 '18 at 18:33
  • So basically you're not going to actually help me, you're just satisfied with marking question as duplicates however you think it suits you. Great job. – Don Box Nov 27 '18 at 21:17
  • I think I am the *only* one helping you here. I replied to all your comments and each time I provide you with a solution but well we are always faulty here. Did you try `min-height:100%` .. I think not, you are complaining about me helping you – Temani Afif Nov 27 '18 at 21:34

0 Answers0