Width fit content не работает

Fit-content и fit-content()

Дата публикации: 2021-05-25

От автора: сегодня мы рассмотрим fit-content и fit-content(), которые являются специальными значениями для width и grid. Это … сложно — не как концепция, а в практическом применении.

Минимальное и максимальное содержание

Прежде чем приступить к рассмотрению fit-content, мы должны кратко рассмотреть два особых значения для width: min-content и max-content. Они нужны вам для понимания fit-content.

Обычно (то есть со значением width:auto) блок занимает столько места по горизонтали, сколько может. Вы можете изменить горизонтальное пространство, указав для width конкретное значение, но вы также можете указать браузеру определить его значение по содержимому поля. Вот что делают min-content и max-content:

min-content означает: минимальная ширина контейнера с содержимым. На практике это означает, что браузеры видят, какой элемент контента самый широкий, и устанавливают для ширины поля это значение. Самый широкий фрагмент контента — это самое длинное слово в тексте, самое широкое изображение, видео или другой объект.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

max-content означает: максимальная ширина контейнера с содержимым . В случае текста это означает, что весь текст помещается в одну строку, а поле становится настолько широким, насколько это необходимо, чтобы вместить всю строку. В общем, это нежелательный эффект. Самым большим элементом контента также может быть изображением или видео; в этом случае браузеры используют эту ширину для определения ширины поля.

Если вы используете hyphens:auto или что-то подобное, браузер будет разбивать слова в правильных точках переноса, прежде чем определять минимальную ширину.

Quick Chromia

Все браузеры на базе Chromium на Android (протестированные в Chrome (v90), Samsung Internet (v87) и Edge (v77)) прерывают текст width:max-content в приведенном выше примере на тире и, таким образом, принимают ‘width: max-’ в качестве максимального содержимого, при условии, что страница НЕ имеет мета-области просмотра. Ни один другой браузер не делает этого, в том числе Chrome на Mac.

Кроме того, Chromia на Android делает размер шрифта немного меньше, когда вы изменяете размер полей ниже максимально возможной ширины.

Этих ошибок НЕ возникает в UC (на основе Chromium 78). Кажется, UC принимает здесь свои собственные решения и невосприимчив к подобным ошибкам.

fit-content

По сути, понимание fit-content состоит в следующем:

Источник

Способы горизонтальной центровки элементов и сжатия их ширины по контенту

Если средствами CSS вы смещаете элемент, значение ширины которого не задано явно, то его ширина примет значение shrink-to-fit . Это удобно в тех случаях, когда необходимо добиться обтекания элементов, определенно не зная какой ширины они должны быть. Очень распространенным примером таких ситуаций является оформление навигационных меню, когда вам зачастую требуется чтобы значение ширины пунктов такого меню варьировалось и зависело от размера размещенного в нем текста.

Кроме того, не зная точной ширины элемента достаточно сложно выровнять его по горизонтали. Возьмите, к примеру, все туже навигационную панель. Что если в нее входят лишь несколько элементов, ширина которых ужимается (shrink-to-fit) по их контенту, но вам также необходимо сжать ширину самой навигационной панели согласно объему, занимаемому ее пунктами, а также выровнять ее по горизонтали. Добиться сжатия ширины не сложно, нужно лишь применить свойство float , но то, что касается центровки, то здесь не все так просто. Вы можете попытаться применить margin:0 auto , но поскольку для элемента, реализующего навигационное, меню ширина не задана явно, то это не даст желаемого эффекта. В этом и заключается проблема – вы не знаете точной ширины навигационного меню.

Неплохим выходом из данной ситуации была бы установка свойства float: center , но к сожалению на данный момент у нас такой возможности нет. Тем не менее, существует несколько путей решения этой проблемы. И мне удалось найти не менее пяти способов, каждый их которых использован при создании демонстрационной страницы сжатия ширины элемента и его горизонтальной центровки. Вы можете открыть ее исходный код для изучения HTML и CSS. Какой из вариантов выберите вы, зависит исключительно от вашей разметки, к тому же если хотите, можете изменить его, адаптировав под вашу ситуацию, учитывая при этом поддержку выбранного вами способа различными браузерами.

display: inline-block

Если элемент, реализующий навигационное меню имеет предка, которому вы можете назначить свойство text-align: center , то достичь желаемой цели можно применив display: inline-block . Вот необходимая для такого случая разметка:

и соответствующие стили:

В зависимости от конкретного дизайнерского решения вам может понадобиться дополнительно применить свойство text-align: left (или right ) для правила с селектором .navbar ul .

Поддержка браузерами.

Этот подход работает практически везде. Применительно к IE, он поддерживается в IE8+ без необходимости использования хаков, и даже в IE7, если вы активируете свойство hasLayout , а для свойства display вместо значения inline-block примените inline :

Для того чтобы задействовать это правило только в IE7 используйте условные комментарии или CSS хаки, по вашему усмотрению.

position: relative

Другой метод (на который указал мой коллега @martinjansson) подразумевает использование небольшого трюка, связанного со свойством position: relative , который заключается в применении двух родительских элементов. Один для позиционирования и второй для предотвращения появления горизонтальной полосы прокрутки. HTML код:

Хитрость заключается в следующем: внутренний контейнер делаем плавающим, что заставляет сузить его ширину до размера, достаточного для вмещения контента; применив относительное позиционирование, сдвигаем его вправо на 50% ширины внешнего контейнера .navbar ( *то есть центруем ); далее также с помощью относительного позиционирования и установки отрицательного значения -50% для свойства left возвращаем на место левую грань элемента списка. Но если ширина окна браузера будет меньше чем удвоенная ширина навигационного меню, то использование относительного позиционирования в данном случае вызовет появление горизонтального скроллбара. Для решения этой проблемы внешнему контейнеру, который предназначен для содержания плавающего дива, назначается свойство overflow: hidden .

Поддержка браузерами.

Также как и в предыдущем случае с display: inline-block , этот метод тоже работает практически везде, но для IE7 снова нужны дополнительные меры, на этот раз с целью обеспечения нормальной работы свойства overflow: hidden :

display: table

Если вы заинтересованы в максимально возможном сокращении разметки, то неплохим вариантом для вас будет свойство display: table , использование которого в нашем случае не требует дополнительного элемента-обертки:

Таблицам свойственно автоматически подстраивать свою ширину под объем контента, а их центровка с помощью значения auto для полей возможна без явного указания значения ширины таблицы. Вот соответствующий CSS код:

Поддержка браузерами.

Этот метод (собственно, как и все остальные, связанные с установкой display: table ) не работает в IE7 и ниже, но работает в остальных браузерах. В крайнем случае, можно как-нибудь смириться с дефектами отображения шаблона сайта в IE7- или обойти данную проблему с помощью плавающих

и
элементов, форматируемых в рамках целевых CSS правил для IE7 и ниже.

width: fit-content/intrinsic

Следующий способ, о котором писал Каталин Росу в своей статье Выравнивание по горизонтали с помощью CSS свойства fit-content, подразумевает использование установки width: fit-content .

Ключевое слово fit-content описано в разделе CSS Intrinsic & Extrinsic Sizing Module Level 3 ( *Модуль внутренних и внешних размеров. Уровень 3. ) спецификации.

Как и в случае с display: table , этот способ тоже не нуждается в дополнительном элементе контейнере:

Подгонка ширины по контенту добивается путем установки ширины элемента списка

в значение fit-content (с вендорными префиксами для Firefox и Chrome). В Safari для этих целей используется нестандартное ключевое слово intrinsic , что, возможно, тоже должно быть учтено в вашем коде. Определив ширину элемента согласно его контента, установкой для левого и правого поля значения auto добиваемся центровки элемента по горизонтали:

Поддержка браузерами.

На данный момент достойной поддержки для этого метода нет, единственное, на что вы можете рассчитывать, так это на его работу в Firefox, Safari и последних версиях Chrome. Насколько мне известно, поддержки в IE и Opera пока нет.

display:inline-flex

И последний способ подразумевает использование модуля flex layout, а точнее значения display: inline-flex . Этот метод довольно схож с одним из описанных выше, использующим определение display: inline-block и поэтому необходимый для них HTML код одинаков:

Поддержка браузерами.

Этот подход также подразумевает повышенные требования к браузеру, но тем не менее, поддержка этого способа несколько лучше чем в случае с fit-content . Все же при его использовании на данный момент необходимо применять вендорные префиксы во всех браузерах за исключением Opera 12.1, он так же не работает в IE9 и ниже. Вы можете взглянуть на детальную информацию касательно поддержки модуля Flexible Box Layout различными браузерами.

Какой из способов выбрать?

Глядя на такое разнообразие вариантов трудно определиться с выбором. Хотя вы, вероятно, знаете ответ – все зависит от обстоятельств. Тем не менее, метод, использующий конструкцию display:inline-block , на мой взгляд, является наиболее предпочтительным с точки зрения поддержки браузерами и с учетом того, что при этом вы можете воспользоваться свойством white-space для контроля переноса содержания навигационного меню на следующую строку, в случае если его ширина превосходит доступную ширину окна браузера. Для решения затрагиваемой в статье проблемы вы можете воспользоваться конструкцией flex-wrap: wrap , но в этом случае не рассчитывайте на такой же уровень поддержки браузерами.

Если вы все еще не определились, то, по крайней мере, у вас есть из чего выбирать (и этот список может быть расширен). Надеюсь, что один из представленных здесь способов поможет в вашем конкретном случае.

Источник

width

Свойство width — устанавливает ширину области содержимого элемента.

Общие сведения

Все элементы на веб-странице имеют прямоугольные формы и у каждого элемента есть блочная модель, которая описывает прямоугольные области для созданного элемента: область содержимого (content box), область внутренних отступов (padding box), область границ (border box), и область внешних полей (margin box). Область содержимого есть у всех элементов. Области отступов, границ и полей являются необязательными и их существование зависит от того применяете вы padding, boder или margin на элементе.

Блочная модель CSS-элемента, которая включает в себя содержимое (content box), внутренние отступы (padding box), границы (border box) и внешние отступы (margin box).

Любые внутренние отступы добавленные к элементу будут увеличивать итоговую ширину элемента, поэтому вы не всегда можете получить ожидаемую ширину если добавите padding к вашему элементу. Элемент с width: 300px; и padding: 20px; будет отображён с шириной в 340px .

Свойство width не работает со строчными элементами, такими как . Для того чтобы установить ширину у строчного элемента его нужно принудительно привести к блочному типу с помощью свойства display. Например, display: inline-block; и display: block; у строчного элемента позволят вам определить его ширину.

Синтаксис свойства

• Синтаксис:
• Значение по умолчанию: auto
• Применяется: ко всем элементам, кроме строчных элементов, строк таблиц и строк групп
• Наследуется: нет
• Анимируется: да

Значения свойства

— определяет ширину элемента с использованием единиц измерения. Смотрите тип чтобы увидеть полный список возможных значений.

— определяет ширину элемента в процентах относительно родительского элемента. Смотрите тип

чтобы увидеть полный список возможных значений.

auto — браузер будет сам высчитывать и выбирать ширину элемента основываясь на его обычном потоке.

inherit — ширина наследуется от родительского элемента.

available — ширина элемента равна ширине дочернего элемента минус горизонтальные внешние отступы, границы и внутренние отступы текущего элемента.

max-content — внутренняя предпочтительная ширина. max-content ширина — это примерно та ширина, которую бы имел контент если бы в него не были добавлены «мягкие» переносы строк, например, параграф который бы не разбивался на несколько строк, а выглядел как одна большая строка.

min-content — внутренняя минимальная ширина. min-content ширина — это примерно та ширина, которую бы имел контент, если бы он был разломан и перенесён на следующую строку во всех возможных местах. В большинстве случаев, его ширина будет зависеть от самого широкого элемента внутри него.

fit-content — Технически говоря, fit-content больше чем:

• min-content
• наименьшее из the max-content и available

Поддержка браузерами

Свойство width поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer и на Android и на iOS.

Внутренние и внешние размеры

Позволяет указывать ширину и высоту с помощью внутренних значений max-content , min-content , fit-content и stretch (ранее fill ).

Источник

Auto-sizing width with fit-content in css

I’m trying to prevent a parent division to be smaller than it’s children using min-width and fit-content .

I first setup a division .parent with a min-width: fit-content . I, then added, a child with width: 100px and min-width: fit-content . Finaly, I added enough characters to the children to bust the 100px ;

I would expect the parent to fit the content of the children, which fit the content of the characters.

Strangely, if I change the children’s width to 1%, the min-width is respected.

3 Answers 3

The code is working as it should. The parent div will only stretch its width up to the contents inside it, i.e the child div.

And here you have defined the width of child div as 100px, so the parent div width will also expand only till 100px, and about the text, which is overflowing outside child div, is not considered as content for parent div.

If you want the parent to fit the content of the children, you should change the width of child div to fit-content

Ok, so I am not sure I totaly understand what you want to do but we can start from this answer. I dont’t know how much you know about CSS so dont’t be offended by my answer.

First, in HTML most elements have, by default, two types of rendering (this is really simplified) : block-level or inline. A block-level element will take the width of its parent. An inline element will take the width of its content.

So if you understand that principle you’ll see that having the parent element to be as wide as its children which is as wide as its content is pretty simple. Here is an exemple:

Now, of course there are other ways to do it, but this is the simplest solution. The best solution will depend on your context.

Источник