<fieldset> cambia de tamaño incorrectamente; parece tener un `min-width: min-content` inamovible

Problema

Tengo un <select>problema en el que uno de sus <option>valores de texto es muy largo. Quiero <select>cambiar el tamaño para que nunca sea más ancho que su padre, incluso si tiene que cortar el texto mostrado. max-width: 100%debería hacer eso.

Antes de cambiar el tamaño:

Lo que quiero después de cambiar el tamaño:

Pero si carga este ejemplo de jsFiddle y cambia el tamaño del ancho del panel de resultados para que sea más pequeño que el de <select>, puede ver que la selección dentro de <fieldset>no logra reducir su ancho.

Lo que realmente veo después de cambiar el tamaño:

Sin embargo, la página equivalente con a <div>en lugar de a<fieldset> se escala correctamente. Puede verlo y probar sus cambios más fácilmente si tiene a <fieldset>y a uno <div>al lado del otro en una página . Y si elimina las etiquetas circundantes<fieldset> , el cambio de tamaño funciona. De alguna manera, la <fieldset>etiqueta está provocando que se rompa el cambio de tamaño horizontal.

Los <fieldset>actos son como si hubiera una regla CSS fieldset { min-width: min-content; }. ( min-contentsignifica, aproximadamente, el ancho más pequeño que no hace que un niño se desborde). Si reemplazo <fieldset>con a <div>withmin-width: min-content , se ve exactamente igual. Sin embargo, no hay ninguna regla min-contenten mis estilos, en la hoja de estilos predeterminada del navegador o visible en el Inspector CSS de Firebug. Intenté anular todos los estilos visibles en el <fieldset>inspector CSS de Firebug y en la hoja de estilo predeterminada de Firefox Forms.css , pero eso no ayudó. Específicamente anulando min-widthy widthtampoco hizo nada.

Código

HTML del conjunto de campos:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

Mi CSS que debería estar funcionando pero no lo está:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Restablecer las widthpropiedades a los valores predeterminados no hace nada:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Más CSS en el que intento y no logro solucionar el problema :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

Más detalles

El problema también ocurre en este ejemplo de jsFiddle más completo y complicado , que es más similar a la página web que en realidad estoy tratando de arreglar. Puede ver a partir de eso que ese <select>no es el problema: un bloque en línea divtampoco cambia de tamaño. Aunque este ejemplo es más complicado, supongo que la solución para el caso simple anterior también solucionará este caso más complicado.

[Editar: consulte los detalles de compatibilidad del navegador a continuación.]

Una cosa curiosa acerca de este problema es que si configuradiv.wrapper { width: 50%; } , el <fieldset>tamaño se detiene en el punto en el que el tamaño completo <select>habría llegado al borde de la ventana gráfica. El cambio de tamaño ocurre como si lo <select>tuviera width: 100%, aunque <select>parezca que sí width: 50%.

Si le das a <select>selfwidth: 50% , ese comportamiento no ocurre; el ancho simplemente está configurado correctamente.

No entiendo el motivo de esa diferencia. Pero puede que no sea relevante.

También encontré una pregunta muy similar : El conjunto de campos HTML permite a los niños expandirse indefinidamente . El autor de la pregunta no pudo encontrar una solución y supone que no hay otra solución aparte de eliminar el archivo <fieldset>. Pero me pregunto, si realmente es imposible hacer la <fieldset>visualización correcta, ¿por qué? ¿Qué en <fieldset>las especificaciones de o CSS predeterminado ( a partir de esta pregunta ) causa este comportamiento? Este comportamiento especial probablemente esté documentado en alguna parte, ya que varios navegadores funcionan así.

Objetivo y requisitos previos

La razón por la que intento hacer esto es como parte de la escritura de estilos móviles para una página existente con un formulario grande. El formulario tiene varias secciones y una parte está envuelta en un archivo <fieldset>. En un teléfono inteligente (o si hace que la ventana de su navegador sea pequeña), la parte de la página con <fieldset>es mucho más ancha que el resto del formulario. La mayor parte del formulario limita bien su ancho, pero la sección con <fieldset>no lo hace, lo que obliga al usuario a alejarse o desplazarse hacia la derecha para ver toda esa sección.

Soy cauteloso a la hora de eliminar simplemente el archivo <fieldset>, ya que se genera en muchas páginas de una aplicación grande y no estoy seguro de qué selectores en CSS o JavaScript podrían depender de ello.

Puedo usar JavaScript si lo necesito y una solución de JavaScript es mejor que nada. Pero si JavaScript es la única forma de hacer esto, me gustaría escuchar una explicación de por qué esto no es posible usando solo CSS y HTML.

Editar: soporte del navegador

En el sitio, necesito ser compatible con Internet Explorer 8 y versiones posteriores (acabamos de dejar de admitir IE7), la última versión de Firefox y la última versión de Chrome. Esta página en particular también debería funcionar en teléfonos inteligentes iOS y Android. Un comportamiento ligeramente degradado pero todavía utilizable es aceptable para Internet Explorer 8.

Volví a probar mi ejemplo rotofieldset en diferentes navegadores. De hecho, ya funciona en estos navegadores:

• Internet Explorer 8, 9 y 10
• Cromo
• Chrome para Android

Se rompe en estos navegadores:

• Firefox
• Firefox para Android
• Internet Explorer 7

Por lo tanto, el único navegador que me importa y que incluye el código actual es Firefox (tanto en escritorio como en dispositivos móviles). Si el código se arreglara para que funcionara en Firefox sin romperlo en ningún otro navegador, eso resolvería mi problema.

La plantilla HTML del sitio utiliza comentarios condicionales de Internet Explorer para agregar clases .ie8al .oldieelemento <html>. Puede usar esas clases en su CSS si necesita solucionar las diferencias de estilo en IE. Las clases agregadas son las mismas que en esta versión anterior de HTML5 Boilerplate .

Jul 01 '13 23:07 Rory O'Kane

Problema de Safari en iOS con la respuesta seleccionada

La respuesta de Jordan Gray me pareció particularmente útil. Sin embargo, no pareció resolver este problema en Safari iOS.

El problema para mí es simplemente que el conjunto de campos no puede tener un ancho automático si el elemento dentro tiene un ancho máximo como% de ancho.

Solución al problema

Simplemente configurar el conjunto de campos para que tenga un ancho del 100% de su contenedor parece solucionar este problema.

Ejemplo

fieldset {
    min-width: 0; 
    width: 100%; 
}

Consulte lo siguiente para ver ejemplos prácticos: si elimina el % de ancho del conjunto de campos o lo reemplaza con automático, no seguirá funcionando.

JSFiddle | codepen

Apr 23 '2014 08:04 boars

He luchado durante muchas horas con esto y, básicamente, el navegador está aplicando un estilo computarizado que debes anular en tu CSS. Olvidé la propiedad exacta que se establece en fieldsetelementos versus divs (¿quizás min-width?).

Mi mejor consejo sería cambiar su elemento a div, copiar los estilos calculados de su inspector, luego volver a cambiar su elemento fieldsety comparar los estilos calculados para encontrar al culpable.

Espero que ayude.

Actualización: agregar display: table-cellayudas en navegadores que no son Chrome.

Jul 23 '2013 23:07 phdj