Набор полей HTML позволяет детям неограниченно расширяться

Я хочу поставить прокручиваемую ячейку внутри fieldset, но я сталкиваюсь с причудой, и я не могу понять, как это сделать. Когда вы помещаете свой прокручиваемый div внутри fieldset, fieldset расширяется вместо прокрутки прокручиваемого элемента.

Heres тестовый пример. Следующее расширяется неопределенно (boo):

<div style="width: 300px; overflow: hidden;">
   <fieldset>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

Но если вы используете div, он работает как ожидалось (ура!):

<div style="width: 300px; overflow: hidden;">
   <div>
      <div style="overflow: scroll; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </div>
</div>

Как я могу заставить fieldset вести себя как div?

ОТВЕТЫ

Ответ 1

Кажется, нет жизнеспособного решения этой проблемы. Если вам действительно нужен набор полей, вы можете использовать div, а затем стилизовать его так, чтобы он выглядел как набор полей, но вы столкнулись с множеством проблем с перекрестным браузером и головными болями. Лучшее решение: реорганизовать форму, чтобы больше не использовать поля.

Ответ 2

WebKit и Firefox ограничивают поля, чтобы иметь "неявную" ширину, основанную на вычисленной ширине их содержимого. Здесь, как переопределить его в каждом.

  • WebKit делает это относительно легко. Это поведение определено в таблице стилей по умолчанию, поэтому вы можете переопределить его, указав min-width: 0 для набора полей.

  • Firefox - это более жесткая гайка, потому что ограничения ширины поля устанавливаются глубоко в коде компоновки Gecko. К счастью, существует обходное решение: добавьте правило только Gecko, чтобы установить свойство display для набора полей в значение, соответствующее одному из нескольких внутренних элементов таблицы.

Объединяя все это:

fieldset { min-width: 0; }

@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */
    fieldset { display: table-cell; }
}

jsFiddle demo.

Это основано на моем ответе на вопрос ; вы можете ссылаться на это для более полного объяснения, в том числе встроенные в gory-браузеры, связанные с исправлением для Firefox.

Ответ 3

Я не уверен, если вы этого хотите, но это работает:

<div style="width: 300px; overflow: auto;">
   <fieldset>
      <div style="overflow: auto; white-space: nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

Вы также можете удалить корневой раздел, и он все равно будет работать.

Ответ 4

Это то, что вам нужно?

<div style="overflow: auto; width: 300px; height: 55px;">
   <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
      </div>
   </fieldset>
</div>

Ответ 5

запомнить

позиция: абсолютный не будет работать с отображением: ячейка таблицы Это то, что у меня есть при попытке отладить гибкую компоновку

поэтому просто имейте в виду это