He estado atrapado con este simple problema por un tiempo. Puede ser una duplicación, pero no pude encontrar un problema similar en línea.
Estoy tratando de hacer que la altura de la barra verde sea del 100% (para que tenga la misma altura que el padre rojo).
Aquí hay un codepen si ayuda: https://codepen.io/tartie2/pen/NWYZpgj
Aquí está el código:
div { background-color:red; height:200px; width:300px; position: relative; overflow: auto; } div::after{ content: ''; position:absolute; top: 0; left: 0; min-height: 100%; width:10px; background-color: green; } <div> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div>El padre tiene una altura explícita de 200px . El elemento ::after está tratando de llenar esa altura. Si elimina la propiedad de height del padre, el pseudo elemento llenará toda la altura del padre.
div { background-color: red; width: 300px; position: relative; overflow: auto; } div::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 10px; background-color: green; } <div> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div>Prueba esto:
.wrapper { width: 200px; height: 200px; display: flex; flex-direction: row; } .green-bar, .content { height: 100%; } .green-bar { width: 10px; background-color: green; } .content { padding-left: 10px; background-color: red; width: 100%; position: relative; overflow: auto; } <div class="wrapper"> <div class="green-bar"></div> <div class="content"> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> <h1>hello</h1> </div> </div>