Lo que dices no tiene mucho sentido por las siguientes razones:
- Al hacer la parte izquierda absoluta o fija, el cuerpo del padre no crecerá.
- Si haces la parte derecha fija entonces usar flexbox carece de sentido por que no aplicará si tiene
position: fixed
.
Lo que deseas puedes realizarlo de dos formas:
- Dándole un posicion fixed al div de la derecha.
- Dándole un alto del 100% del view height Y un
overflow: auto
al div del contenido.
Ambas resultarán en lo mismo, pero la segunda opción es más limpia.
Marcado
<section class="parent">
<section class="child">
<div class="content">A</div>
</section>
<section class="child">
<div class="content">B</div>
</section>
</section>
Opción #1
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
overflow: auto;
max-height: 100vh;
}
.child:first-of-type {
background-color: gold;
overflow: auto;
width: 50%;
}
.child:last-of-type {
background-color: teal;
height: 100%;
position: fixed;
right: 1.6%;
top: 0;
width: 50%;
}
.content {
background-color: coral;
color: #fff;
display: flex;
font-family: 'segoe ui';
font-size: 48pt;
font-weight: lighter;
height: 1500px;
justify-content: center;
margin: 0px auto;
width: 100px;
}
Vemos como al div derecho le hemos dado right: 1.6%
. Esto es necesario de lo contrario, tapará el scrollbar. Puedes ponerlo a 0 y verlo por tú mismo.
Opción #2
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
overflow: hidden;
}
.child {
flex: 1;
}
.child:first-of-type {
background-color: gold;
overflow: auto;
}
.child:last-of-type {
background-color: teal;
}
.content {
background-color: coral;
color: #fff;
display: flex;
font-family: 'segoe ui';
font-size: 48pt;
font-weight: lighter;
height: 1500px;
justify-content: center;
margin: 0px auto;
width: 100px;
}
Esta solución es la más limpia. No necesitamos hacer uso de position: fixed
. Tan solo el padre deberá tener el 100% del view height y el div izquierdo, igual, pero haciéndolo scrollable con overflow: scroll
.
Demos
fixed
.position
afixed
.