setting responsive width of the child element inside a flex div - html

Question

In my application, there's a login page having a bootstrap customized well containing login form. Looks like this
Code was like
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
Now, I have to put this on the center of the page. horizontally and vertically. So I removed the and all the bootstrap column grids. Put the well inside the custom container having display flex property.
<div class="login-container">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
CSS of .login-container
.login-container {
position: fixed;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Now, the login form looks like this
How to get the same responsive width as I have previously inside the bootstrap col-lg-4 grid of the well. I tried to give the grids inside the container but that didn't work for me. I want the login form something like this without hardcoding width, something like this.
This I have done just for the question purpose by hardcoding width of the well.

Answer 1

The property position: fixed does not respect the width of the parent box if you want it to take up the full width, so one solution would be to calculate the width of the parent box using jQuery code and apply it to the child box. Here is an example:
let parentWidth = parseInt($('.col-sm-4.login-container').css('width'));
let parentPadding = parseInt($('.col-sm-4.login-container').css('padding').split(' ')[1]) * 2;
let childWidth = parentWidth - parentPadding;
$('.login').css('width', childWidth);
.container {
background: black;
}
.col-sm-4 {
background: #eee;
height: 100vh;
}
.login-container {
display: flex;
align-items: center;
}
.login {
width: 100%;
height: 100px;
background: red;
position: fixed;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 login-container">
<div class="login"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
I hope it helps you.