Un elemento flexible/cuadriculado establece el límite de tamaño para hermanos
Tengo dos elementos hermanos, cada uno de los cuales contiene contenido dinámico.
<div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div>
En algunos casos sibling-1tendrá más contenido entonces sibling-2y viceversa. Me gustaría que la altura del segundo elemento sibling-2siempre fuera igual a la altura del primero sibling-1. Si la altura de sibling-2es mayor, entonces su altura sibling-1desbordará el flexdiv y, por lo tanto, será desplazable.
¿Hay alguna forma de lograr esto con Flexbox?
Sí, es posible. Deje al hermano configurando la altura máxima en paz y configure los de los demás flex-basis: 0y flex-grow: 1, que de acuerdo con las especificaciones los expandirá a la altura de su hermano. Sin posicionamiento absoluto. No se permite establecer altura en ningún elemento.
main {
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 7em;
border: thin solid black;
margin: 1em;
}
:not(.limiter)>div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}<main>
<section>
<div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
in flow text in flow text in flow text in flow text in flow text in flow text in</div>
</section>
<section class="limiter">
<div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
<section>
<div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
</main>
¿Hay alguna forma de lograr esto con Flexbox?
Básicamente, no. La característica flexible de alturas iguales se basa en la altura del contenedor, no en ningún hermano en particular.
Entonces sibling-1y sibling-2siempre puede tener la misma altura.
Pero flexbox no tiene ningún mecanismo incorporado para limitar la altura de los elementos a la altura de un hermano.
Considere las propiedades de posicionamiento de JavaScript o CSS.
A continuación se muestra un ejemplo que utiliza el posicionamiento absoluto:
.flex {
display: flex;
width: 200px;
position: relative;
}
.flex>div {
flex: 0 0 50%;
border: 1px solid black;
box-sizing: border-box;
}
.sibling-2 {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
}<div class="flex">
<div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
<div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>jsFiddle
Sí, puedes lograr esto haciendo que los hermanos 1 y 2 también sean contenedores flexibles, luego en el hermano-2 crea un div absoluto (también contenedor flexible) dentro que será el padre de tu desplazador.
<div class="sibling-1 flex sibling"></div>
<div class="sibling-2 flex sibling">
<div class="absolute flex scroller-wrap">
<div class="relative vertical-scroller">
your content here
</div>
</div>
</div>
CSS:
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.flex{
display:flex;
}
.sibling-2{
flex:1;
}
.scroller-wrap{
height:100%;
}
en el hermano 2, simplemente establezca una altura mínima en píxeles; útil en casos responsivos si los hermanos 1 y 2 se apilan entre sí en el móvil
Como mencioné en los comentarios y continuó en otras respuestas, no existe un método flexbox.
Sin embargo , es posible usarlo position:absoluteen el segundo hermano... pero como en realidad no es una solución flexbox, esto está aquí solo para información.
.flex {
margin: 1rem auto;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
Mostrar fragmento de código
