html - hard - Múltiples colores de fondo en flexbox desplazable




wrap responsive design (4)

Ajustar el div izquierdo y derecho con otro div, configurar el display flex y min-height: min-content para ese div. también establece la altura 100% para div izquierda y derecha.

    #c1 {
      background-color: gray;
      display: flex;
      height: 200px;
      overflow-y: auto;
    }

#wrap{
  display:flex;
  width:100%;
  min-height:min-content;
}
#left {
  flex: 1;
  background-color: red;
  height:100%;
}
#right {
  flex: 1;
  background-color: blue;
  height:100%;
}
   

 <div id="c1">
      <div id='wrap'>
        <div id="left">
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
          <div>line</div>
        </div>
        <div id="right">
          <div>line</div>
        </div>
       </div>
    </div>

https://code.i-harness.com

Tengo un flexbox ( flex-direction: row ) con 2 columnas de contenido y una altura fija. Quiero que la columna izquierda y derecha tenga un fondo rojo y azul respectivamente. Si alguna de las columnas se desborda, aparece la barra de desplazamiento de la flexbox (la parte desbordada sigue siendo roja / azul). Si la altura del contenido de una columna es menor que la altura de la flexbox , el espacio a continuación aún debe ser rojo / azul.

Sin usar colores degradados o javascript, ¿cómo puedo lograr este efecto?

Demostración (quiero que la parte gris sea azul):

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  align-items: baseline;
}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}
<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>

EDITAR

Métodos que no funcionan:

  • Configuración align-items: stretch : parte desbordada será gris
  • Agregue una position: absolute div que se superpone al flexbox , únicamente para el fondo: este div tendrá el ancho incorrecto si la barra de desplazamiento está visible.

Creo que sería más fácil usar display: table; para su contenedor, y display: table-cell; para tus columnas Los elementos que actúan como tablas, puede obtener el renderizado que desea.

Tuve que agregar otro contenedor pensado, debido al hecho de que no se puede limitar la altura de una table tan fácilmente.

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

.table {
  display: table;
  width: 100%;
}

#left {
  background-color: red;
}
#right {
  background-color: blue;
}

#left, #right {
  display: table-cell;
  width: 50%;
}
<div id="c1">
  <div class="table">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
  </div>
</div>


El problema es con align-items: baseline . Puedes dejar eso o reemplazarlo con estiramiento y obtendrás lo que buscas.

#c1 {
  background-color: gray;
  display: flex;
  height: 200px;
  overflow-y: auto;
  /* align-items: baseline; */

}
#left {
  flex: 1;
  background-color: red;
}
#right {
  flex: 1;
  background-color: blue;
}
<div id="c1">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
</div>


Trabajando desde la respuesta de Nithin Charly, obtuve esto:

(no funciona correctamente en IE debido a errores)

#c1 {
  background-color: gray;
  height: 200px;
  overflow-y: auto;
}

#wrap {
  display: flex;
  min-height: 100%;
  align-items: stretch;
}

#left {
  flex: 1;
  background-color: red;
}

#right {
  flex: 1;
  background-color: blue;
}
<div id="c1">
  <div id="wrap">
    <div id="left">
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
      <div>line</div>
    </div>
    <div id="right">
      <div>line</div>
    </div>
  </div>
</div>





flexbox