Почему элемент с шириной: 100% не принимает ширину родителя?

У меня возникла проблема с тем, что я не могу установить ту же ширину, что и ее родительский элемент внутри элемента flexbox.Почему элемент с шириной: 100% не принимает ширину родителя?

Вот код и пролет с классом theSpan не имеет того же width в качестве его родителя.

.container { 
 
    display: flex; 
 
} 
 
.item1 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

источник

2016-09-19 Dean Zhao

Пространства являются встроенными элементами по умолчанию - лучше использовать DIVs (= элементы блока) для элементов, которые вы хотите определить ширину или высоту для – Johannes

Ваш span элемент с классом theSpan является дочерним гибкой позиции (.item1).

Этот гибкий элемент не гибкий контейнер.

Потому что only the children of a flex container participate in flex layout, пролет (внук) дисквалифицирован. Он не существует в flex formatting context.

Пробел существует в стандарте block formatting context.

В BFC span по умолчанию является неотъемлемым, неотменяемым элементом.

Причина width: 100% не работает предусмотрено в спецификации:

10.2 Content width: the width property

Это свойство не применяется к незамещаемым встроенных элементов. Ширина содержимого для незаменимых ячеек встроенного элемента - это размер отображаемого содержимого .

10.3.1 Inline, non-replaced elements

Свойство width не применяется.

источник

2016-09-19 17:33:33

Привет, Майкл, Спасибо за объяснение и помог мне редактировать заголовок и контент (я не являюсь носителем английского языка). Я буду больше смотреть в основу CSS. –

сделать .item1display:flex, а затем установить .theSpan в flex:1 и вы можете установить все детали как flex:0 200px, так как вы хотите иметь flex-basis из 200px вам не нужно имеют flex:1

.container { 
 
    display: flex; 
 
} 
 
.container > div { 
 
    flex: 0 200px 
 
} 
 
.item1 { 
 
    display: flex; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    flex: 1; 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

источник

2016-09-19 16:33:28 dippas

Спасибо за другой подход. –

Я просто объяснил упрощенное и на примере, что @michael_b сказал с Sources;) – dippas

Вы должны включить span в block через display.

.container { 
 
    display: flex; 
 
} 
 
.item1 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid yellow; 
 
} 
 
.item2 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid blue; 
 
} 
 
.item3 { 
 
    flex: 1 1 200px; 
 
    border: 5px solid red; 
 
} 
 
.theSpan { 
 
    display:block;/* <= display instead or with width will do */ 
 
    border: 2px solid black; 
 
}

<div class='container'> 
 
    <div class='item1'> 
 
    <span class='theSpan'>abcdefg</span> 
 
    </div> 
 
    <div class='item2'> 
 
    <span>1</span> 
 
    </div> 
 
    <div class='item3'> 
 
    <span>2</span> 
 
    </div> 
 
</div>

источник

2016-09-19 16:54:27

Почему элемент с шириной: 100% не принимает ширину родителя?

ответ

Смежные вопросы