0

Eu estou trabalhando em um projeto pessoal e enquanto fazia a parte de HTML e CSS do código cheguei nesse problema, a div que fica no meio empurra a div do menu lateral direito, criando um scroll lateral que não era para acontecer.

fiz essa imagem rápida no photoshop para exemplificar

Esse era para ser o resultado final, mas como eu havia dito, a div vermelha empurra do "MENU2", estou tentando deixar tudo responsivo, para quando estiver em telas diferentes ou até mesmo no celular os menus encolhem e a parte vermelha vai diminuir para o tamanho correto.

Esse é o CSS das divs vermelhas

.fundo {
    padding: 20px;
    justify-content: center;
    display: flex;
    background-color: #f0f0f0;
}

.fundo-card {
    width: 35vw; 
    height: 53vw;
    max-height: 75vh;
    max-width: 50vh;
    margin: auto;
    position: relative;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    border-radius: 20px;
    padding: 0.7vw;
    background-color: #c4c4c4;
    display: inline-block;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
}

E esse é do "MENU2"

.sidebar-right {
    display: block;
    float: right;
}

E o HTML

    <div class="d-flex">
        <div class="border-right bg-menul" id="sidebar-wrapper">
            <div class="top-perfil">
                <div class="top-perfil-circulo">
                    <img class="top-perfil-img" src="">
                </div>
                <div class="info-perfil">
                    <a class="info-name"></a>
                </div>
            </div>
            <div class="list-group ">
                <a href="/" class="list-group-item list-group-item-action">Home</a>
                <a href="/perfil/" class="list-group-item list-group-item-action">Perfil</a>
                <a href="/rolls/" class="list-group-item list-group-item-action">Pessoas</a>
                <a href="#" class="list-group-item list-group-item-action">Grupo</a>
                <a href="#" class="list-group-item list-group-item-action">Mercado</a>
                <a href="#" class="list-group-item list-group-item-action">Eventos</a>
            </div>
        </div>

        <div class="fundo">
            <div class="fundo-card" id="roll">
                <div class="fundo-img-card">
                    <img class="img-card" src="" class="d-block w-100" alt="...">
                </div>
            </div>
            <div class="fundo-card">
                <div class="fundo-img-card">
                    <img class="img-card" src="" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
        <div class="border-right bg-menul sidebar-right" id="sidebar-wrapper">
            <div class="top-perfil">
                <h3>Amigos</h3>
            </div>
            <div class="list-group ">
                <a href="#" class="list-group-item list-group-item-action">Amigo 1</a>
                <a href="#" class="list-group-item list-group-item-action">Amigo 2</a>
            </div>
        </div>
    </div>
6
  • Não existe motivo para usar float com flex e provavelmente também não é necessário usar o position:relative.
    – Syzoth
    Commented 5/04/2021 às 23:57
  • 3
    cade o html, sem ele dificulta para te responder
    – hugocsl
    Commented 5/04/2021 às 23:58
  • um jeito bruto de resolver seria colocar um overflow-y: hidden, mas isso pode, e provavelmente vai, ser um tiro no pé mais cedo ou mais tarde
    – yoyo
    Commented 6/04/2021 às 0:10
  • Infelizmente se eu colocar overflow-y: hidden o "MENU2" vai ficar cortado em alguma dimensão
    – user230138
    Commented 6/04/2021 às 0:14
  • O problema é que vc colocou um width fixo de 35vw na classe .fundo-card
    – hugocsl
    Commented 6/04/2021 às 12:11

0

Você deve fazer log-in para responder a esta pergunta.