Problem with internal scrollbar

Asked

Viewed 39 times

0

In certain resolutions (smaller) the scroll bar in the div "contacts" works perfectly, but in others they are superimposed by the content on your left.

With normal resolution is as follows:

inserir a descrição da imagem aqui

The border and the top div overlaps the scrollbar, but on a smaller screen, that the page would have a general sidebar, the scrollbar works perfectly

inserir a descrição da imagem aqui 

.mensagens {
    width: 90%;
    position: absolute;
    height: 80%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2%;
    background-color: #fafafa;
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0px #00000080;
}

.mensagens .contatos {
    position: absolute;
    width: 25%;
    height: auto;
    max-height: 100%;
    min-height: 100%;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.mensagens .contatos::-webkit-scrollbar {
    width: 5px;
}
 
.mensagens .contatos::-webkit-scrollbar-thumb {
    background: #888;
}

.mensagens .contatos .pesquisa {
    width: 100%;
    height: 50px;
    background-color: #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: -1;
}

.mensagens .contatos .pesquisa input {
    height: 30px;
    width: 80%;
    background-color: #fafafa;
    border-radius: 15px;
    border: none;
    margin-left: 5px;
    padding-left: 8px;
    outline: none;
}

.mensagens .contatos .pesquisa button {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #5969FF;
    color: #fefefe;
    border: none;
    margin-right: 5px;
    outline: none;
}

.mensagens .contatos .conversas {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mensagens .contatos .conversas .contato {
    height: 60px;
    width: 100%;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mensagens .contatos .conversas .contato .img {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.mensagens .contatos .conversas .contato .img img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 50%;
}

.mensagens .contatos .conversas .contato .info {
    width: 70%;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
}

.mensagens .contatos .conversas .contato .info .nome {
    font-size: 18px;
}

.mensagens .contatos .conversas .contato .info .texto {
    font-size: 14px;
    color: #666;
}

.mensagens .contatos .conversas .contato .horario {
    font-size: 14px;
    color: #666;
    margin-right: 10px;
}
<div class="mensagens">
    <div class="contatos">
        <div class="pesquisa">
            <input type="text" name="pesquisa" id="pesquisa" placeholder="Pesquisar...">
            <button><i class="fas fa-plus"></i></button>
        </div>
        <div class="conversas">
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
            <div class="contato">
                <div class="img"><img src="https://png2.kisspng.com/sh/1638a4766b1125889a4b8276881ee1c9/L0KzQYm3VcA5N5DBiZH0aYP2gLBuTgV0baMye9H2cIX3dcO0ifNwdqQyiAt8dHXwPbTvif5me5Yyj9t3ZD33ecXzhb1kd516hdC2NXHpQYW5VBZlO5JnTKo3M0e7RIa8VccyPWM6T6g5NkO8SIeATwBvbz==/kisspng-user-computer-icons-system-chinese-wind-title-column-5af1427fd3ab48.378455571525760639867.png"></div>
                <div class="info">
                    <span class="nome">Anom</span>
                    <span class="texto"><i class="fas fa-check"></i> Opa</span>
                </div>
                <div class="horario"><span>10:15</span></div>
            </div>
        </div>
    </div>
</div>

https://codepen.io/luan-peil/pen/xNYYMW

html css

  • Face would have you add an image to your question of how you’re getting there. And explain better what behavior you want or how you want the end result?

  • @hugocsl, placed the images

  • I think it’s a problem rendering the browser itself... but I’m not sure... I couldn’t simulate the problem here. You know this bar only works in Chrome right?

No answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.