Set height of main container equal to its content-CodePudding

I have a wrapper that has a dropdown element. The wrapper has a height of fit-content. Currently the wrappers height is equal to the input elements height found in the drop down but it ignores the height of the ul in the drop down. How can I make the height of the wrapper equal to the height of the input plus the height of the ul? Thanks in advance.

.wrapper {
  width: 95%;
  height: fit-content;
  padding: 1%;
  background-color: saddlebrown;
}

.wrapper .dropdown {
    width: 100%;
    height: fit-content;
    background-color: aqua;
}

.wrapper .dropdown input {
    width: 100%;
    border: 1px solid #000000;
}

.wrapper .dropdown ul {
    display: block;
    width: 100%;
}

.wrapper .dropdown ul li a {
    cursor: pointer;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<div >
  <div >
    <input  placeholder="Locate your item" />
    <ul >
      <li><a >Item 1</a></li>
      <li><a >Item 2</a></li>
    </ul>
  </div>
</div>

CodePudding user response：

You are facing this problem because according to the bootstrap class "dropdown-menu" CSS is set to be position: absolute; but in your case you need it to be position: relative; so that your wrapper class can consider this <ul> as its child element.

So you need to add some CSS to make your <ul> as position: relative;.

Current CSS for <ul> is:

.wrapper .dropdown ul {
    display: block;
    width: 100%;
}

change it to

.wrapper .dropdown ul {
    display: block;
    width: 100%;
    position: relative;
}

CodePudding user response：

.wrapper .dropdown ul {
    display: block;
    width: 100%;
    position: relative
}