Html Question posted in
Some basic documentation can be found here.

Html – Is there anything that can cause the element with 'min-height' property to misbehave?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat&Book</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="lang">
        <select  class="srclang">
            <option value="en">English</option>
            <option value="ta">Tamil</option>
            <option value="hi">Hindi</option>
        </select>
        <select class="trglang">
            <option value="hi">Hindi</option>
            <option value="en">English</option>
            <option value="ta">Tamil</option>
        </select>
    </div>
    <div class="msgarea"></div>
    <div class="typebar">
        <input type="text" name="message" placeholder="Message.." class="msgbox" required>
        <button class="sendbtn">Send</button>
    </div>
    

    <script src="/chat.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: #E9EFEC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    font-family: 'Nunito Sans', sans-serif;
}

.msgarea {
    width: 100%;
    height: 85vh;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end; /* Align messages from the top */
    gap: 10px;
    background-color: white;
    padding: 10px;
    overflow-y: auto; /* Enable scrolling */
}

.msgarea p {
    max-width: 80%;
    display: block; /* Change this */
    min-height: 40px; /* Keep this */
    background-color: #478CCF;
    padding: 10px;
    border-radius: 10px;
    color: white;
    margin-bottom: 10px;
    margin-top: 10px;
    word-wrap: break-word;
    box-sizing: border-box;
    overflow-wrap: break-word; /* Ensure long words wrap */
}


.lang {
    position: fixed;
    top: 20px;
    left: 20px;
}


.typebar {
    width: 100vw;
    height: 10vh;
    background-color: #E9EFEC;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5%;
    position: fixed;
    bottom: 0;
}

.msgbox {
    width: 80%;
    height: 80%;
    margin-left: 20px;
    border-radius: 25px;
    border: 1px solid black;
    background: white;
    padding-left: 15px;
    box-sizing: border-box;
    font-family: 'Nunito Sans', sans-serif;
    position: relative;
    font-size: 16px;
}

.sendbtn {
    border: 1px solid black;
    background-color: #478CCF;
    color: white;
    width: 10%;
    height: 80%;
    border-radius: 25px;
    margin-right: 20px;
    cursor: pointer;
    font-size: 16px;
}


@media (max-width:700px) {
    .msgarea {
        height: 80vh;
        border: 2px solid #478CCF;
    }

    .msgarea p{
        min-height: 40px;
        margin-top: 20px;
    }

    .msgbox {
        width: 70%;
        height: 70%;
    }

    .sendbtn {
        width: 30%;
        height: 70%;
    }



    
}

Here I set the height of the ‘msgarea p’ to 40px minimum. This works fine if there are few messages inside the ‘msgarea’.I also added overflow property to ‘msgarea’ to ensure that it becomes scrollable once the messages exceed. It too works fine. But the problem is with the ‘msgarea p’ height especially when the messages exceed and it becomes scrollable. Once ‘msgarea’ becomes scrollable the min-height property misbehaves and the text in ‘p’ tag overflows the background color. This is the issue i face.

I tried altering height of p tag to auto but nothing happened.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Instead of setting min-height to 40 px I set height to 'auto' and it worked. I don't know why but it works. Can someone explain why?


  2. 0

    Try and remove the min-height so that the text can cover the cover the entire backround-color and not overflow

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search