Ciao, in effetti non è così semplice. Si può risolvere con flexbox e un pizzico di polvere magica.
Qui una discussione in merito trovata su stackoverflow
https://stackoverflow.com/questions/...t-for-siblings
In sostanza puoi applicare di base un'impostazione a colonne con flexbox e quindi usare un opportuno posizionamento assoluto per limitare l'altezza della seconda colonna.
Riassumendo con un esempio:
codice:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style>
.contenitore{
display: flex;
position: relative;
width: 500px;
}
.colonna1{
background: silver;
flex: 0 0 50%;
}
.colonna2{
background: orange;
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="contenitore">
<div class="colonna1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper.
Quisque suscipit sem non est eleifend consectetur. Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
</div>
<div class="colonna2">
Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque.
Nullam suscipit metus id sem eleifend, ut molestie eros dictum. Curabitur faucibus urna nec ullamcorper pharetra.
Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus.
Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam.
Sed nibh ante, tempor ac eleifend non, sodales a massa. Phasellus ornare elementum semper.
Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
</div>
</div>
</body>
</html>
Permessi di invio
Rispondi quotando
