Question 396170 in CSS Question posted in
Some basic documentation can be found here.

Css – Fill (stretch) or scroll based on element size

Is it possible to get the stretch behavior of display: flex when min-content would not fill the page, but still have good scrolling behavior if min-content is larger than the page size?

Essentially if the behavior second code snippet doesn’t fill the page, I want the behavior of the first code snippet.

* {
  margin: 0.5rem;
}

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

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-items: stretch;
  align-items: stretch;
  background-color: grey;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  align-items: stretch;
  background-color: blue;
}

.content>div {
  height: 100%;
  min-height: 1rem;
  background-color: gold;
}

.footer {
  height: 2rem;
  min-height: 2rem;
  flex: 0 0 1;
  background-color: green;
}
<body>
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="footer center"></div>
</body>
* {
    margin: 0.5rem;
}

html, body {
    width: 100%;
    height: min-content;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-items: stretch;
    align-items: stretch;
    background-color: grey;
}

.content {
    height: min-content;
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    align-items: stretch;
    background-color: blue;
}

.content > div {
    height: 6rem;
    min-height: 1rem;
    background-color: gold;
}

.footer {
    height: 2rem;
    min-height: 2rem;
    flex: 0 0 1;
    background-color: green;
}
<body>
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="footer"></div>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to get it working. I think the key was to use min-height: 100vh instead of height: 100vh as well as using flex-grow: 1. I tried flex: 1 before making the OP, but that didn't work (I probably need to read more about flex since it's apparently preferred to use flex instead of flex-*).

    document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#footer > input").addEventListener("change", (event) => {
    for (d of document.querySelectorAll(".content > div")) {
      d.style.height = event.target.value + 'rem';
    }
  });
});
    body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  background-color: gray;
}

.content {
  padding: 0.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  background-color: blue;
}

.content div {
  height: 2rem;
  flex-grow: 1;
  border: solid;
  background-color: gold;
}

.footer {
  height: 2rem;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer>input {
  height: min-content;
}
    <div class="container">
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="footer" class="footer"><input type="number" value=1 min=0></div>
</div>


  2. 0

    To achieve your desired result, we need to add some fixed height to parent/grand-parent div, in below code I have added fix height of 100vh to container.

    After that you have to add height in % for all childrens/grand childrens so that it adjust to height of current window. In below code I have added height: 85%; to content , height: 27%; to footer & height: 27%; to div.

    I haven’t added explanation for flex usage, if you want to know more about it then please leave a reply. Thank You.

    body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

.container{
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content{
  background-color: blue;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

.content div{
  height: 27%;
  background-color: gold;
  
}

.footer{
  background-color: green;
  height: 10%;
}
    <body>
  <div class="container">
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="footer center"></div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search