Как сделать чтобы элементы занимали всю ширину блока?

Question

Помогите понять как разместить эти элементы так, чтоб они занимали всю ширину блока и чтоб межу ними было одинаковое расстояние

<header>
  <p>Элемент 1</p>
  <div>
    <p> Элемент 2</p>
    <p> Элемент 3</p>
  </div
</header

Answer 1

не совсем понятно, что должно быть на выходе, но как вариант:

header.first, header.first > div {
  display: flex;
  flex-direction: row;
}

header.first p {
  width: calc(100vw / 3);
  border: 1px solid red;
}

header.second, header.second > div {
  display: flex;
  flex-direction: column;
}

header.second p {
  width: 100%;
  margin-bottom: 10px;
  line-height: 20px;
  border: 1px solid green;
}

<header class="first">
  <p>Элемент 1</p>
  <div>
    <p> Элемент 2</p>
    <p> Элемент 3</p>
  </div>
</header>

<header class="second">
  <p>Элемент 1</p>
  <div>
    <p> Элемент 2</p>
    <p> Элемент 3</p>
  </div>
</header>

Answer 2

* {
  box-sizing: border-box;
}
p {
  margin: 0;
  padding: 0;
}
.box1 {
  background-color: darksalmon;
  text-align: center;
}
.box2 {
  display: flex;
}
.box2 p {
  flex: 1 1 100%;
  text-align: center;
}
.box2 p:first-child {
  background-color: powderblue;
}
.box2 p:last-child {
  background-color: slategrey;
}

<header class="first">
  <p class="box1">Элемент 1</p>
  <div class="box2">
    <p> Элемент 2</p>
    <p> Элемент 3</p>
  </div>
</header>

БЛОГ НА HUSL

Как сделать чтобы элементы занимали всю ширину блока?

Ответы (2 шт):