padding-bottom no effect ？

Question

everyone, I have encountered a bit of an incomprehensible bug in css, although I found a solution, I still want to ask what is causing it。thanks.

    #app {
      height: 100vh;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    #box {
      display: flex;
      flex-direction: column;
      min-height: 400px;
      height: 1800px;
      padding-bottom: 50px;
    }
    #flex1 {
      flex: 1;
    }

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div id="box">
      <div id="flex1">
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
      </div>
      <button>confirm</button>
    </div>
  </div>
</body>
</html>

question1: height: 1800px;no effect ？

question2: even removed height: 1800px;, padding-bottom: 50px;is also no effect？

The solution to all problems is

#box {
  flex-shrink: 0;
}

why?

Kameron · Answer 1 · 2022-03-29T12:47:11.833

This is not necessarily a bug, this is just how it works with flex. Without even setting shrink or grow attributes with flex it will try to use the available space on larger screens and shrink to the minimum space on smaller screens.

Adding height: 1800px; is too broad and because you have the container #app set to 100vh it will be forced to resize only using height. You have to specify a min-height instead so that the browser knows not to shrink lower the min specified height.

padding-bottom doesn't work when you remove the height because then the container is growing with the content & there is no room left in the container for it to have padding. You can see that in the screenshot below:

So in short, flex-shrink: 0; is the equivalent of telling the browser to use all of the height in the specified container = 1800px. Adding a min-height would be the other alternative.

#box {
  /*flex-shrink: 0;*/
}

#app {
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#box {
  display: flex;
  flex-direction: column;
  max-height: 1800px;
  min-height: 1800px;
  padding-bottom: 50px;
}

#flex1 {
  flex: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div id="box">
      <div id="flex1">
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
        <h1>123</h1>
      </div>
      <button>confirm</button>
    </div>
  </div>
</body>
</html>

padding-bottom no effect ？

1 Answers1