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.
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>
overflow-y: hidden
, mas isso pode, e provavelmente vai, ser um tiro no pé mais cedo ou mais tardeoverflow-y: hidden
o "MENU2" vai ficar cortado em alguma dimensão.fundo-card