size of div in absolute with some content [duplicate] - html

Question

This question already has answers here:
How to turn off word wrapping in HTML?
(6 answers)
Closed 2 years ago.
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">
Lorem ipsum dolor sit amet, consectetur
Link 2
Link 3
</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">
Lorem ipsum dolor sit amet, consectetur
Link 2
Link 3
</div>
</div>