html - texto - resaltar filas de una tabla con jquery

Lista vertical de elementos, donde cada fila reduce su ancho para que coincida con el contenido interno

Question

Quiero crear una lista vertical, donde cada fila reduce su ancho para contener perfectamente su contenido interno (frente al comportamiento div predeterminado de ampliar su ancho para llenar el contenedor).

Me gustaría hacer esto con solo un elemento HTML para cada fila (sin divs adicionales).

El siguiente código hace exactamente lo que quiero, pero no funciona en Safari (¿error?).

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  width: 300px
}
.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  /* this will shrink the width to the inner content
        in Chrome and Firefox, but not in Safari */
  margin-right: auto;
}

<div class=''container''>
  <div class=''row-item''>Item #1</div>
  <div class=''row-item''>Another Item...</div>
  <div class=''row-item''>Item No. 3</div>
</div>

Aquí hay un codepen con el código anterior: http://codepen.io/anon/pen/woKYqx

Sé que es trivial resolver este problema agregando un div de envoltura y luego usando display: inline-block en el elemento interno (u otras soluciones similares).

Sin embargo, parece que debería ser posible resolver esto sin agregar elementos HTML adicionales. Es un diseño bastante simple.

¿Existe una forma de navegador cruzado para hacer esto con un solo elemento HTML para cada fila?

Answer 1

Cuando está usando display: flex, también debe usar los prefijos del proveedor. también admite versiones anteriores de navegadores cuando tenga dudas consulte en caniuse.com

.container {
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
 display: -webkit-flex; /* NEW - Chrome */
 display: -ms-flexbox; /* TWEENER - IE 10 */
 display: flex;
 /* ETC */
}

NOTA: caniuse.com ha escrito sobre errores reportados sobre la altura de los niños de Flexbox en safari.

Answer 2

Puede borrar todo el contenido flexible y usar float:left y clear:left en los hijos, y overflow-x: hidden en el padre:

http://codepen.io/anon/pen/pNjQJJ

Answer 3

Está utilizando margin-right: auto para empujar el elemento hacia la izquierda, lo que también obliga al elemento a tomar el ancho de su contenido.

Este es un buen método pero, como habrás notado, falla en Safari.

Una alternativa simple es usar align-self: flex-start en los elementos flex:

.row-item {
  padding: 5px;
  margin: 5px;
  border: 1px solid green;
  align-self: flex-start;  /* NEW */
  /* margin-right: auto;  (can be kept or removed) */
}

O bien, utilice elementos de align-items: flex-start en el contenedor flexible.

.container {
  margin: 10px;
  border: 2px solid #999;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
  width: 300px
}