Set height of main container equal to its content

user_16009435 0
Viewed 53

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<div class="wrapper">
  <div class="dropdown">
    <input class="form-control" placeholder="Locate your item" />
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">Item 1</a></li>
      <li><a class="dropdown-item">Item 2</a></li>
    </ul>
  </div>
</div>

css html
2 Answers
.wrapper .dropdown ul {
    display: block;
    width: 100%;
    position: relative
}
user_87460030

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;
}
user_197689790
Related