сделать ошибку или мою ошибку ?: overflow-hidden-zero-height, торчащий из Flexbox

select * from (select name, ID from Empoyee) Visits
    pivot(sum(ID) for name
    in ([Emp1],
    [Emp2],
    [Emp3]
    ) ) as pivottable;
0
задан Frank Nocke 13 July 2018 в 08:15
поделиться

1 ответ

Это связано с выравниванием базовой линии. Вы устанавливаете align-items: baseline на main -селектор. Кажется, что он корректно работает для других значений свойства align-items.

У меня нет времени, чтобы больше узнать о базовых линиях flexbox atm, но я уверен, что более подробное объяснение можно найти здесь: https://drafts.csswg.org/css-flexbox-1/#flex-baselines

html {
  font-family: sans;
  font-size: 1.4em cosmetic;
}

main {
  border: 4px dashed rgba(255, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: initial;
}

.collapsible {
  border-top: 2px solid blue;
  border-bottom: 2px solid purple;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.collapsible-inner {
  background: rgba(128, 0, 128, 0.6);
}

button {
  height: 220px;
}
Flex elements appears to have a »radiation« affekt going beyond a height-0-element two levels up. Investigating...<br/>&nbsp;<br/>

<main>
The outer container...
<section class="collapsible">
    <button className='buttonA'>Click me</button>  
</section>
</main>
Some more text...

1
ответ дан RMo 17 August 2018 в 13:26
поделиться
  • 1
    Ах. Хороший улов. Итак, базовый уровень уверен, что все (будут) вписываться в него ... все еще странно, это »укусы« через высоту-0 ... »| – Frank Nocke 13 July 2018 в 12:50
Другие вопросы по тегам:

Похожие вопросы: