Почему блок автоматически растягивается на всю ширину?

Question

[art style]

https://codepen.io/aptypkaa/pen/zYGZGGo
сабж
блоки с цифрами на всю ширину..

Comments

[Froggyweb]

сабж div - блочный элемент

[art style]

Froggyweb, я делаю тоже самое что в билдере oxygen builder
что в html. div внутри div'a. в билдере он не растягивается автоматом...

[html-css]

потому что гладиолус

[art style]

Froggyweb, в

[art style]

html-css, я пытаюсь понять почему при одинаковых условиях получаются разные результаты

[html-css]

art style, вы для начала посмотрите свойства, которые стоят дивам внутри блока
они скорее с блочных переопределены на строчные

[art style]

html-css, https://x4r7.ru/mainpage/

[Froggyweb]

для родителя стоит флекс, он переопределяет поведение дочерних элементов прямых наследников тега.

[html-css]

display:FLEX

Answer 1

[Сергей Кутузов]

.dblock {
  display:flex;
  width:100%;
  height:500px;
  background-color:#000;
}
.left,.right {
  width: 50%;
  height:100%;
  border: 3px solid red;
}
p{
  color:#fff;
  background:#999; - выделение для отладки
}
body {
  margin:0;
}
div{
  width: inherit; - наследование
}

Answer 2

[art style]

ответ
align-items: flex-start;

Answer 3

[html-css]

https://codepen.io/natojezlo/pen/BaNWNPB

Answer 4

[Sergey]

- по-умолчанию занимает 100% родителя. display: flex распространяется на элемент и первых предков.

<div class="dblock">
  <div class="left">&nbsp;</div>
  <div class="right">
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
    <div><p>1</p></div>
  </div>
</div>

.dblock {
  display:flex;
}

.left,.right {
  flex: 1;
  border: 1px solid red;
  padding: .1em;
}

.right {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}
.right>div {
  border:1px solid #ececec;
}