size of div in absolute with some content

Question

I am a bit stuck with my code I did a custom drop down menu and my problem is my div with my content don't take 100% of the content my div is blocked at 160px here is the css code

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px; // I wanted 100% of the content
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
} 

and the full code in jsfiddle https://jsfiddle.net/kg0tjLr9/1/

Answer 1

I think you want max-content instead of specifying px like:

$(document).ready(function() {
  $('.dropbtn').click(function() {
    //$('.dropdown-content').css('display','block');
    $('.dropdown-content').toggle();
    $('#overlay').toggle();
  })
   $('#overlay').click(function(){
    $('#overlay').css('display','none');
    $('.dropdown-content').toggle();
   });
});

#main_content{
  z-index:-1;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: max-content;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2;
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>


<div class="dropdown">
  <div id="overlay"></div>
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="">Lorem ipsum dolor sit amet, consectetur</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

max-content is not supported by internet explorer ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-content)

If you want IE compatibility (add width: auto; white-space: nowrap; instead of max-content):

$(document).ready(function() {
  $('.dropbtn').click(function() {
    //$('.dropdown-content').css('display','block');
    $('.dropdown-content').toggle();
    $('#overlay').toggle();
  })
   $('#overlay').click(function(){
    $('#overlay').css('display','none');
    $('.dropdown-content').toggle();
   });
});

#main_content{
  z-index:-1;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:right;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: auto;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  right:0;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2;
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque veritatis blanditiis porro asperiores quas quasi minima. Laudantium consequatur obcaecati dignissimos ducimus aliquam culpa, libero animi odit! Laboriosam ipsam rem, quas.
</div>


<div class="dropdown">
  <div id="overlay"></div>
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="">Lorem ipsum dolor sit amet, consectetur</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>