After pushing footer to the bottom of the page using flex, container works no longer-CodePudding

Those are the scenarios:

HTML:

<!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>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="__next">
      <div >Content</div>
      <div >Footer</div>
    </div>
  </body>
</html>

Not working container

html,
body,
#__next {
  height: 100%;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

#__next {
  display: flex;
  flex-direction: column;
}

.container {
  background-color: red;
  max-width: 1780px;
  height: 100px;
  margin: 0 auto;
}

.footer {
  height: 50px;
  width: 100%;
  margin-top: auto;
  background-color: green;
}

Working container

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: red;
  max-width: 1780px;
  height: 100px;
  margin: 0 auto;
}

.footer {
  height: 50px;
  width: 100%;
  background-color: green;
}

Can somebody enlighten me what's going on here. When I do use flex with column direction my container stops working and being appropriate width?

Adding width: 100% to the container somehow fixes the issue, but I have no clue why, could You please help me out with this weird CSS behavior.

Thanks!

CodePudding user response：

If you work with flex, you should try to use only flex properties, such as justify-content and flex-grow to decide the size of the flex items.

In this case you also need to make the __next div the same height as the screen. Then you can use space-between to make the footer stick to the bottom. If you give the footer a base height and set the grow/shrink options to 0 it will stay fixed. Then you can use flex-grow on the container to make it fill the remaining space.

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

* {
  box-sizing: border-box;
}

#__next {
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  height:100vh;
}

.container {
  background-color: red;
  flex-grow:1;
}

.footer {
  background-color: green;
  flex:0 0 50px;
}

<div id="__next">
  <div >Content</div>
  <div >Footer</div>
</div>

CodePudding user response：

enter image description here