css - bootstrap - El flexbox posicionado de manera absoluta no se expande para ajustarse a los contenidos

flexbox grid

Question

Esta pregunta ya tiene una respuesta aquí:

• Cuando los elementos de flexbox se ajustan en el modo de columna, el contenedor no aumenta su ancho 4 respuestas

Como se puede ver en el Fragmento a continuación ( Ver como Fiddle ), un flexbox columnar absolutamente posicionado no se expandirá para adaptarse a sus hijos.

En Chrome, por ejemplo, solo será tan ancho como el elemento secundario más ancho y tan alto como la columna más corta.

¿Alguien puede sugerir una solución sin utilizar ningún marcado adicional?

Editar: El número de elementos en la lista será dinámico, al igual que el texto en cada elemento. Necesito pasar a una nueva columna después de un número determinado de elementos.

*{box-sizing:border-box;}
ul{
    background:#090;
    display:flex;
    flex-flow:column wrap;
    left:0;
    list-style:none;
    max-height:202px;
    padding:5px;
    position:absolute;
    top:0;
}
li{
    background:rgba(255,0,0,.75);
    color:#fff;
    flex:1 0 30px;
    font-family:arial;
    line-height:30px;
    max-height:30px;
    margin:1px;
    padding:0 2px;
    min-width:100px;
}

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

Answer 1

La razón por la que los elementos de su hijo no caben en el contenedor flexible es que establece una max-height el contenedor.

Pero lo que está sucediendo en su muestra original es extraño (especialmente los elementos secundarios que se desprenden de la columna);

parece que los elementos flexibles no son capaces de reconocer los bordes del contenedor mientras que el flexbox intenta rellenarlos de todas formas (incluso cambiando flex-direction:column );
lo único que realmente tiene sentido es el ancho máximo del elemento más ancho.

Aquí hay un fragmento sin ancho máximo:

ul{
    background:#090;
    display:flex;
    flex-flow:column wrap;
    list-style:none;
    padding:5px;
    position:absolute; /*max-height:192px;*/
}
/*ul::after{display:table;clear:both; content:''''}clearfix*/
li{
    background:rgba(255,0,0,.75);
    color:#fff;
    flex:1 0 30px;
    font-family:arial;
    line-height:30px;
    margin:1px;
    padding:0 2px;
    min-width:100px;
}

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

EDITAR

No sé cuál es su salida deseada, pero una implementación típica de flexbox podría ser algo como esto:

ul{
    background:#090;
    display:flex;
    flex-flow:column wrap;
    list-style:none;
    padding:5px;
    /*position:absolute;*/
    height:192px;
}
   /*ul::after{display:table;clear:both; content:''''}/*clearfix*/
li{
    background:rgba(255,0,0,.75);
    color:#fff;
    flex:1 0 30px;
    font-family:arial;
    line-height:30px;
    margin:1px;
    padding:0 2px;
   /* width:100px;*/
}

<ul>
    <li>Line 0</li>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4</li>
    <li>Line 5</li>
    <li>Line 6</li>
    <li>Line 7</li>
    <li>Line 8 is a little bit longer</li>
</ul>

Answer 2

Una caja flexible con la position:absolute; Ya no se considera un cuadro flexible por lo tanto, su problema actual.

Debe usar anchos y alturas predefinidos si va a usar position:absolute; .

Consulte aquí para w3c en flexboxes http://www.w3.org/TR/css3-flexbox/#flex-items

"Los elementos de flexión en sí mismos son cuadros de nivel flexible, no cuadros de nivel de bloque: participan en el contexto de formato flexible de su contenedor, no en un contexto de formato de bloque".

Cambiando a position:absolute; obliga a que el contenedor de flexión sea un elemento de bloque (esto le sucede a todos los elementos con position:absolute; ), eliminando así la naturaleza flexible del mismo y también porque su contenido no es un elemento de bloque, son niños de flexión, solo pueden efectuar un nivel de flexión contenedor no es un bloque uno.

La Solución Jquery

Justo entonces hay una manera de hacerlo con jQuery.

Puede que esto no sea lo que querías porque no es solo CSS, pero funciona.

Lo que estoy haciendo aquí es obtener el ancho del contenedor en su ancho original.

Luego, obtenga el ancho máximo de cada elemento 6 (porque ahí es cuando la fila se rompe para formar una nueva columna).

Luego, contando el número total de columnas que hay y use eso para multiplicar el ancho máximo de cada columna por el número de columnas y finalmente sumarlo todo para obtener el ancho deseado de su contenedor.

siéntase libre de quitar y agregar nuevas columnas para probarlo todo.

Fiddle

var count = $("ul.flex-container li:nth-child(6n)").length;

var firstWidth = Math.max.apply(null, $("ul.flex-container").map(function() {
  return $(this).outerWidth(true);
}).get());

var childWidth = Math.max.apply(null, $("ul.flex-container li:nth-child(6n+6)").map(function() {
  return $(this).outerWidth(true);
}).get());

var totalWidth = childWidth * count

$("ul.flex-container").css({
  width: firstWidth + totalWidth,
});

ul.flex-container {
  background: #090;
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  max-height: 192px;
  padding: 5px;
  position: absolute;
}
ul.flex-container li {
  background: rgba(255, 0, 0, .75);
  color: #fff;
  flex: 1 0 30px;
  font-family: arial;
  line-height: 30px;
  margin: 1px;
  padding: 0 2px;
  min-width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="flex-container">
  <li>Line 0</li>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
  <li>Line 6</li>
  <li>Line 7</li>
  <li>Line 8 is a little bit longer</li>
  <li>Line 0</li>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
  <li>Line 6</li>
  <li>Line 7</li>
  <li>Line 8 is a little bit longer</li>
</ul>