Css. Flex(grid) Ширина блоков, в зависимости от контента в независимых блоках

Question

Нужно сделать так, чтобы в первом блоке ширина контента всех трёх первых параграфов была одинаковая, но бралась в зависимости от максимальной ширины самого большего параграфа. Проблема в том, что они не имеют общего родителя и "знать" о ширине других параграфов другие не могут.

Вариант с вертикальными блоками не подходит, нужен один общий родитель. Использовать js тоже нельзя. Может использовать grid? Но у меня не вышло ни каким способом.

Если раскомментировать код flex: 0 1 auto, тогда применится ширина текста, но все три будут разные. Нужно так же, но только что было одинаково.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px 0;
    }
    .flex {
        display: flex;
        flex-wrap: wrap;
    }

    .block {
        background-color: gray;
        margin-bottom: 20px;
        width: 100%;
    }

    .block p {
        padding: 10px;
        border: 2px solid #fff;
    }

    .block p:nth-child(1) {
        flex: 1; 
        /* flex: 0 1 auto; */

    }
    .block p:nth-child(2) {
        flex:  0 1 auto;
    }
    .block p:nth-child(3) {
        flex: 1;
    } 
</style>
<div class="flex container">
    <div class="flex block">
        <p>много текста много много текста много текстамного текста много </p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
    <div class="flex block">
        <p>много текста много </p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
    <div class="flex block">
        <p>много текста много текста</p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
</div>

</body>
</html>

Answer 1

Если можно менять вёрстку, то можно попробовать grid.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto) 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

p {
  padding: 10px;
  border: 2px solid #fff;
  background-color: gray;
}

<div class="grid container">
  <p>много текста много много текста много текстамного текста много </p>
  <p>мало текста</p>
  <p>этот блок на максимально доступное место</p>

  <p>много текста много </p>
  <p>мало текста</p>
  <p>этот блок на максимально доступное место</p>

  <p>много текста много текста</p>
  <p>мало текста</p>
  <p>этот блок на максимально доступное место</p>
</div>

Answer 2

Если сохранять структуру вашей разметки, то на ум приходит только имитация таблицы. Но как по мне, лучше в этом случае решение от @nazarpunk

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}
.pseudo-table{
  display: table;
  border-collapse: collapse;
}
.pseudo-table .block{
  display: table-row;
}
.pseudo-table .block>p{
  display: table-cell;
}


.block {
    background-color: gray;
    margin-bottom: 20px;
    width: 100%;
}

.block p {
    padding: 10px;
    border: 2px solid #fff;
}

<div class="container pseudo-table">
    <div class="block">
        <p>много текста много много текста много текстамного текста много </p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
    <div class="block">
        <p>много текста много </p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
    <div class="block">
        <p>много текста много текста</p>
        <p>мало текста</p>
        <p>этот блок на максимально доступное место</p>
    </div>
</div>

БЛОГ НА HUSL

Css. Flex(grid) Ширина блоков, в зависимости от контента в независимых блоках

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