Я сталкиваюсь с очень странным поведением flexbox для моего макета страницы. Я использую FontAwesome для отображения определенных символов.
В принципе, у меня есть 2 flexbox элемента внутри другого элемента flexbox, и эти дочерние элементы отображают более широкий, чем родительский элемент.
1) У меня есть объект .content__header, который отображается как объект flexbox внутри другой серии объектов flexbox.
2) Объект .content__header содержит 2 дочерних объекта: .breadcrumb и .page_tools. Эти дочерние объекты также отображаются как элементы гибкости.
3) Внутри объекта .breadcrumb у меня есть несколько объектов span (.breadcrumb__test), содержимое которых заменяется FontAwesome значок. Замена выполняется с использованием абсолютного позиционирования псевдоэлемента ::after.
4) Когда я удаляю все HTML-элементы .breadcrumb__text или просто удаляю определение .breadcrumb__text::after из моей таблицы стилей - которое определяет использование шрифта FontAwesome - дочерних объектов (.breadcrumb и .page_tools) рендеринга на их правильной ширине. Поэтому я предполагаю, что это имеет какое-то отношение к замене значком FontAwesome.
.breadcrumb__text::after {
font-family: "FontAwesome";
font-weight: 400;
}
Визуальное представление проблемы
Зеленая линия указывает разницу между шириной родителя и фактическим содержимым.
Код и скрипт ниже.
Браузер: Google Chrome 47.0.2526.106 м
Скрипки:
https://jsfiddle.net/44gymmw2/6/
Update
Когда я удаляю text-indent: 100%; из определения CSS .breadcrumb__text, .breadcrumb отображает как предполагалось. Однако, когда я оставляю text-indent на месте и удаляю определение .breadcrumb__text::after в верхней части таблицы стилей (как описано выше), он также корректно отображает.
Возможно, эта проблема имеет какое-то отношение к FontAwesome или text-indent и flexbox?
Код
HTML
<body>
<div class="layout_wrapper">
<div class="layout_container__content">
<div class="content">
<header class="content__header">
<div class="breadcrumb">
<span class="breadcrumb__text breadcrumb__text--first">From </span><a class="breadcrumb__link" href="#">Dashboard</a><span class="breadcrumb__text"> to </span><a class="breadcrumb__link" href="#">Find records</a><span class="breadcrumb__text"> to </span>
<h1 class="breadcrumb__current">Kylo Ren’s Command Shuttle™</h1>
</div>
<ul class="page_tools">
<li class="page_tools__item">
<button type="button" class="button button--primary">Save</button>
</li>
<li class="page_tools__item">
<button type="button" class="button">Cancel</button>
</li>
</ul>
</header>
</div>
</div>
<div class="layout_container__sidebar">
<div class="sidebar">
<article class="widget">
<h2 class="widget__title">Widget</h2>
</article>
</div>
</div>
</div>
</body>
CSS
/* Removing this makes it work */
.breadcrumb__text::after {
font-family: "FontAwesome";
font-weight: 400;
}
/* Don't remove anything below */
.breadcrumb__text--first {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
body {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
}
.layout_wrapper {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
.layout_container__content {
flex: 0 0 75vw;
}
.layout_container__sidebar {
flex: 0 0 25vw;
}
.content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
.content__header {
outline: 1px solid blue;
background-color: #434649;
color: #ffffff;
flex: 0 0 100%;
display: flex;
flex-flow: row nowrap;
}
.breadcrumb {
outline: 3px dashed purple;
flex: 1 1 auto;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.breadcrumb__text {
flex: 0 0 2em;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: relative;
text-align: center;
}
.breadcrumb__text::after {
content: '\f105';
padding: 0;
text-indent: 0;
position: absolute;
top: 0;
right: 0;
width: 100%;
}
.breadcrumb__text--first {
flex: 0 0 0;
}
.breadcrumb__text--first::after {
content: none;
}
.breadcrumb__link {
flex: 0 0 auto;
display: inline-block;
font-size: 0.8571rem;
}
.breadcrumb__current {
flex: 0 0 100%;
margin: 0;
}
.page_tools {
outline: 3px dashed red;
flex: 0 0 auto;
display: flex;
flex-flow: row nowrap;
list-style: none outside none;
}
