I'm working with some html/css code and I have a specific requirement. I want the height of the .inner element to adjust based on its content, only if it exceeds the default minimum height that I've defined in the code. Currently, the code doesn't allow the .box elements to expand beyond the initial height of .inner, which is not what I want. I suspect this issue may be related to the use of flex. If I remove display:flex; from .inner, the boxes can stretch beyond the initial height, but then .inner itself doesn't adjust to fit the content.
I want .inner to expand when necessary, while still using either display:flex; or display:grid; for layout, as specified in my code. How can I achieve this flexibility in the design?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
width: 100%;
height: 70px;
background-color: steelblue;
}
.container {
width: 100%;
height: calc(100vh - 70px);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 95%;
height: 100%;
background: steelblue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
width: 200px;
height: 400px;
background-color: burlywood;
margin: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="style.css" rel="stylesheet" />
<title>Static Template</title>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="inner">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>You can view the complete code in action on codesandbox