Почему блок заходит на плавающий блок?

Question

[DTX]

codepen.io/anon/pen/XKgQbQ

Как сделать, чтобы .b занимал оставшуюся часть и не заходил на .a?

Answer 1

[bingumd]

.b {
  height: 3rem;
  border: 4px solid #f00;
  overflow: hidden;
}

Comments

[DTX]

Так часть .b всё равно будет под .a

[bingumd]

codepen.io/anon/pen/bZRJwL

[DTX]

bingumd: Ого, супер. А почему так происходит?

Answer 2

[Сергей delphinpro]

codepen.io/anon/pen/rLwXZo

Comments

[DTX]

С флексом просто, хотелось без него

[Сергей delphinpro]

DTX:
- Ребята, нужна помощь! Подскажите, как забить гвоздь?
- Возьми молоток, и бей по шляпке гвоздя.
- С молотком просто, хотелось бы без него.
:D :D :D
Спасибо за поднятое настроение!

[DTX]

Сергей: флекс скорее на роль кувалды и строй отряда подходит)

Answer 3

[Антон Федорян]

Почему блок заходит на плавающий блок?

- float выводит документ из потока

div {
  border: 2px solid;
  display: flex;
}

.a {
  height: 3rem;
  width: 3rem;
}

.b {
  flex-grow: 1;
  height: 3rem;
  border: 4px solid #f00;
}

Comments

[DTX]

С флексом просто, хотелось без него