CODEWITHSUNDEEP
htmlcss
Agendum
Agendum

Reputation: 2011

How to enable scrollbar with non-fixed height in a window-centered div?

I am creating a div which is centered to the window. It's content can grow, and if it grows passed the size of the window, the content div should have it's scrollbar account for the overflow. But instead, the div just grows off the screen and gets clipped. If I set an explicit height on the content, everything works, but since I don't know the explicit height of the environment I cannot do that. What is the correct way to do this?

JSFiddle: https://jsfiddle.net/CodeVirtue/cjhz31xq

Here is the template:

<div class="fullscreen-overlay">
  <div class="fullscreen-container">
    <div class="window-with-titlebar">
      <div class="titlebar">
        <div class="titlebar-left">
          Left
        </div>
        <div class="titlebar-right">
          Right
        </div>
      </div>
      <div class="content">
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40
      </div>
    </div>
  </div>
</div>

And all the CSS:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.fullscreen-overlay {
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 12px 12px;
}

.fullscreen-container {
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;  
}

.window-with-titlebar {
  background-color: yellow;
  max-width: 100%;
  max-height: 100%;
}

.titlebar {
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.titlebar-left {
  background-color: darkgreen;
}

.titlebar-right {
  background-color: lightgreen;
}

.content {
  background-color: blue;
  overflow-y: scroll;
  max-width: 100%;
  max-height: 100%;
}

Upvotes: 0

Views: 34

Answers (1)

Steve Gallant
Steve Gallant

Reputation: 36

I believe I was able to achieve what you are looking for by making the parent container use flexbox:

.window-with-titlebar {
  background-color: yellow;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

Upvotes: 1

Related Questions