Can a div with absolute position be resized?
I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input.
Moreover, is using absolute position appropriate for this scenario?
<!DOCTYPE html>
<html>
<head>
<title>My CSS Grid</title>
<style>
body {
color: #fff;
font-family: "Nunito Semibold";
text-align: center;
}
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
grid-template-areas:
"header header header"
"aside comp main";
}
.page > * {
background: #3bbced;
padding: 10px;
}
.header {
grid-area: header;
}
.comp {
grid-area: comp;
}
.input_cell {
display: grid;
}
.input {
flex: 1;
}
.modal_container {
margin-top: 20px;
flex: 1;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div class="page">
<div class="header">Header</div>
<div class="comp">
<div class="input_cell">
<input class="input" />
<div class="modal_container">Modal</div>
</div>
& lt; /div>.
... etc