Flex / CSS Div won't grow 100% of parent height-CodePudding

I am using flex and have 2 columns. These items both fill all height available.

Inside item 1 I've added 2 div's ... the second one I need it to fill up all space available and scroll Y if items inside it go overflow.

I cannot get .box to go 100% height of it's parent.

Here is the code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    <div >
      <div >
        <div >Title here</div>
        <div >
          Box Here
        </div>
      </div>
      <div ></div>
    </div>

  </body>
</html>

CSS:

.container {
  display: flex;
  flex-direction: column;
  min-height: 98vh;
}

.item {
  flex: 1;
}

.item:nth-child(1) {
  background-color: blue;
}

.item:nth-child(2) {
  background-color: red;
}

.title {
  font-size: 30px;
  color: white;
}

.box {
  background-color: grey;
  height: 100%; /* not working */
  align-self: stretch;
  overflow-y: scroll;
}

How can I fix this issue?

CodePudding user response：

I changed the HTML layout a little bit. You can use flex.

HTML

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

<head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div >
        <div >Title here</div>
        <div >
            <div >
                <div >
                    <div>
                        test
                    </div>
                    <div>
                        test
                    </div>
                    <div>
                        test
                    </div>
                </div>
            </div>
            <div ></div>
        </div>
    </div>
</body>

</html>

CSS

.container {
    min-height: 98vh;
}

.flex {
    display: flex;
    flex-direction: column;
    height: 98vh;
}

.item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item1 {
    background-color: blue;
}

.item2 {
    background-color: red;
}

.title {
    font-size: 30px;
    color: white;
    background: blue;
}

.box {
    background-color: grey;
    overflow-y: scroll;
    flex: 1;
}

CodePudding user response：

Use this css:

.container {
    min-height: 98vh;
}

.flex {
    /* display: flex; */
    /* flex-direction: column; */
    height: 98vh;
}

.item {
    /* flex: 1; */
    height: 50%;
    display: flex;
    flex-direction: column;
}

.item1 {
    background-color: blue;
}

.item2 {
    background-color: red;
}

.title {
    font-size: 30px;
    color: white;
    background: blue;
}

.box {
    height: 100%;
    overflow-y: auto;
    background-color: grey;
}

No need to use flex and complicate the problem