Kevin Powell - Community•16mo ago

A div does not want to take a specified proportions inside the container

hey , i am facing a problem in css , i dont know why a div who contains some text and a form , does not take the height of its container trying to make it look as the other example, i tried to set the margins and paddings but it sucks , something is wrong, please some solutions please here is the code i am using

.form-page{
        display: flex;
        margin: auto;
        background-color: $white;
        width: 45%;
        height: 60vh;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 25px;

        .left-content{
            position: relative;
            top: 6rem;
            margin-left: 2.5rem;
            margin-right: 2.5rem;
            display: flex;
            flex-direction: column;

.form-page{
        display: flex;
        margin: auto;
        background-color: $white;
        width: 45%;
        height: 60vh;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 25px;

        .left-content{
            position: relative;
            top: 6rem;
            margin-left: 2.5rem;
            margin-right: 2.5rem;
            display: flex;
            flex-direction: column;

2 Replies

croganm•16mo ago

Could you make a reproducable example in codepen? Just makes it easier to work with I see you're doing some unique things like setting position relative for the text and then using a top of 6rem. In an instance like that, margin-top works fine

Steve•16mo ago

Yeah the div probably is taking up the whole height. Switch out the top like @croganm said and add font sizes and margins to your text and forms. Then justify-content: center on .left-content.

Gaming

Programming

A div does not want to take a specified proportions inside the container