How to make div that minimum height at the start, and it can be expanded by content to fixed max-hei-CodePudding

CodePudding user response：

Please, Check this code

#content {
  position: relative;
  min-height: 20px;
  background-color: green;
  max-height: 200px;
  overflow: auto;
}

<html>

<head>
  <meta charset="UTF-8" />
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div id="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</body>

</html>

Demo Link: https://stackblitz.com/edit/web-platform-g3xn1g?file=styles.css