Problema

eu tenho um<select> onde um de seus<option>Os valores de texto são muito longos. eu quero o<select> para redimensionar, de modo que nunca seja mais largo que seu pai, mesmo que tenha que cortar o texto exibido.max-width: 100% deveria fazer isso.

Antes de redimensionar:

O que eu quero depois de redimensionar:

Mas se vocêcarregar este exemplo de jsFiddle e redimensionar a largura do painel de resultados para ser menor que a largura do painel<select>, você pode ver que o select dentro do<fieldset> não dimensiona sua largura para baixo.

O que estou vendo depois de redimensionar:

No entanto, opágina equivalente com um<div> em vez de um<fieldset> escala adequadamente. Você pode ver isso eteste suas mudanças com mais facilidade se você tema <fieldset> e um<div> ao lado do outro em uma página. E se vocêexcluir o ambiente<fieldset> Tag, o redimensionamento funciona. o<fieldset> tag está, de alguma forma, causando o redimensionamento horizontal.

o<fieldset> atos é como se houvesse uma regra de CSSfieldset { min-width: min-content; }. (min-content significa, aproximadamente, a menor largura que não faz a criança transbordar.) Se eu substituir a<fieldset> com um<div> commin-width: min-content, parece exatamente o mesmo. Ainda não há regra commin-content em meus estilos, na folha de estilo padrão do navegador ou visível no Inspetor de CSS do Firebug. Tentei substituir todos os estilos visíveis no<fieldset> no CSS Inspector do Firebug e na folha de estilo padrão do Firefoxforms.css, mas isso não ajudou. Especificamente sobreposiçãomin-width ewidth não fez nada também.

Código

HTML do fieldset:

<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>

Meu CSS deve estar funcionando, mas não está:

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

select {
    max-width: 100%;
}

Repor owidth propriedades paraos padrões faz nada:

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

CSS adicional em que eutente e não conserte o 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;
}

Mais detalhes

O problema também ocorre nestemais abrangente, mais complicado jsFiddle exemplo, o que é mais parecido com a página da web que estou tentando corrigir. Você pode ver a partir disso que o<select> não é o problema - um bloco inlinediv também não redimensiona. Embora esse exemplo seja mais complicado, presumo que a correção para o caso simples acima também corrigirá esse caso mais complicado.

[Editar: veja os detalhes do suporte ao navegador abaixo.]

Uma coisa curiosa sobre este problema é quese você definirdiv.wrapper { width: 50%; }, a<fieldset> pára de redimensionar-se no ponto, em seguida, o tamanho completo<select> teria atingido a borda da viewport. O redimensionamento acontece como se o<select> temwidth: 100%, mesmo que a<select> parece que temwidth: 50%.

Se vocêsdar o<select> em siwidth: 50%, esse comportamento não ocorre; a largura é simplesmente definida corretamente.

Eu não entendo o motivo dessa diferença. Mas isso pode não ser relevante.

Eu também encontrei a pergunta muito semelhanteO conjunto de campos HTML permite que as crianças se expandam indefinidamente. O usuário não conseguiu encontrar uma solução eadivinha que não há solução além de remover o<fieldset>. Mas eu estou pensando, se é realmente impossível fazer o<fieldset> exibir certo, por que isso? O que em<fieldset>'Sespecificação ouCSS padrão (a partir desta questão) causa esse comportamento? Esse comportamento especial provavelmente está documentado em algum lugar, já que vários navegadores funcionam assim.

Objetivo e requisitos de segundo plano

A razão pela qual estou tentando fazer isso é como parte da criação de estilos para celular em uma página existente com um formato grande. O formulário tem várias seções, e uma parte dele é envolvida em um<fieldset>. Em um smartphone (ou se você tornar a janela do navegador pequena), a parte da página com o<fieldset> é muito mais largo que o resto do formulário. A maior parte do formulário restringe sua largura, mas a seção com o<fieldset> não, forçando o usuário a diminuir o zoom ou rolar para a direita para ver toda essa seção.

Eu tenho medo de simplesmente remover o<fieldset>, como é gerado em muitas páginas em um aplicativo grande, e não tenho certeza de quais seletores em CSS ou JavaScript podem depender dele.

Eu posso usar JavaScript se eu precisar, e uma solução JavaScript é melhor que nada. Mas, se o JavaScript for a única maneira de fazer isso, eu ficaria curioso em saber por que isso não é possível usando apenas CSS e HTML.

Editar: suporte ao navegador

No site, preciso dar suporte ao Internet Explorer 8 e posterior (acabamos de descartar o suporte para o IE7), o Firefox mais recente e o Chrome mais recente. Esta página específica também deve funcionar em smartphones iOS e Android. Um comportamento ligeiramente degradado, mas ainda utilizável, é aceitável para o Internet Explorer 8.

Eu retesteimeu quebradofieldset exemplo em diferentes navegadores. Na verdade, já funciona nesses navegadores:

Internet Explorer 8, 9 e 10cromadaChrome para Android

Ele quebra nesses navegadores:

Raposa de fogoFirefox para AndroidInternet Explorer 7

Assim, o único navegador que me interessa que o código atual invade é o Firefox (tanto no desktop quanto no celular). Se o código fosse corrigido para funcionar no Firefox sem quebrá-lo em outros navegadores, isso resolveria meu problema.

O modelo HTML do site usa comentários condicionais do Internet Explorer para adicionar classes como.ie8 e.oldie ao<html> elemento. Você pode usar essas classes no seu CSS se precisar solucionar diferenças de estilo no IE. As classes adicionadas são as mesmas queesta versão antiga do Boilerplate HTML5.