flex-basis and height is not working into flexbox

Question

is when i am trying to change the heigth:200px; of div.item but doesnt working, and how it was turned into a flex item then i tried to use flex:1 1 100%, or 200px of size, but it's not work.

i want to turn the heigth of div.item to 100% of div.list , but to the border be visible i putted padding.

*{
    margin: 0; padding: 0; border: 0;
}

html, body{
    width: 100%; height:100%;
    font-size:1.2rem;
    font-weight: bold;
}




nav.container-1{
    margin: 100px auto;
    width: 60%; height: 40%;
    background-color: orange;
    position: relative;
    padding-top: 1px;
}

div.list{
    

    width: 70%; height: 30%;

    border: 1px solid white; padding: 20px; box-sizing:border-box;

    margin: auto auto; margin-top: 50px;

    display: flex; flex-flow:column; /* flex-direction: column */; align-items:center; gap: 5px;


    overflow: auto;

    position: relative; bottom: 0px; right:0;
}

div.item{
    flex: 1 1 200px; 
    width:90%;height:200px;
    border: 1px solid white;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <nav class="container-1">
            <div class="list">
                <div class="item">paragraph 1</div>
                <div class="item">paragraph 2</div>
                <div class="item">paragraph 3</div>
                <div class="item">paragraph 4</div>
            </div>
        </nav>
</body>
</html>

flex-basis and height is not working into flexbox

0 Answers0