How remove margin-bottom from flex-direction column?


I’m new with flexbox and I have a problem.

enter image description here

I don’t understand, why my div is so long in height. I tried to put a height value but it doesn’t change anything.

What’s is strange is that the content of this div is correct in size.
enter image description here

This is my code:

       <div className="competences-content">
            <div className="competences-text-content">
                <h1 className="competences-title">Langage de création</h1>
                <p className="competences-text">blablabla</p>
            <input className="competences-image" type="image" src="/assets/img/competences.png" />


    flex-flow: row;
    position: relative;
    top: 45px;
    width: 100%;
    margin-left: 5%;

    flex-direction: column;
    margin-right: 15px;
    width: 50%;

    font-family: Poppins-bold;
    color: #200A40;
    font-size: 44px;
    letter-spacing: 1px;

    overflow-y: auto;
    max-height: 50%;
    font-family: Poppins-regular;
    font-size: 10px;
    line-height: 16px;

    height: 375px;

I tried to remove one by one my CSS value, unfortunately didn’t find the cause of the problem.
Could you help me please ?

Kind regards


max-height: value of your choice;
flex-direction: column;
margin-right: 15px;
width: 50%;

Try adding max-height property to this class in css. And add a value that you want it to be in px / rem.

Answered By – Nishant Bhosale

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published