CSS Grid / Flex: два столбца одинаковой ширины и один с автоматической шириной

Question

Как сделать так, чтобы два столбца имели одинаковую ширину.Так как ширина указана в функции столбца с большей шириной.И третий, занимающий «ширину», остается.

Левый, центральный и правый столбец.Я хочу, чтобы левый столбец имел ту же ширину, что и правый столбец.И эта ширина задается шириной столбца с большим количеством текста.

Пример: столбец LEFT с текстом: ABCDEFGHIJK Этот столбец имеет 150px столбец RIGHT с текстом: ABC Этот столбец имеет 30px

Я хочу это:

Column LEFT: 150px
Column CENTER: 100%
Column RIGHT: 150px

Но я не знаю ширину.Это задается столбцом, в котором больше текста, чем больше ширины.

Если LEFT больше, чем RIGHT, то ширина RIGHT равна th-й ширине LEFT.Если LEFT меньше RIGHT, то ширина LEFT равна ширине RIGHT.

Answer 1

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

Я буду использовать переменные CSS для текста, чтобы избежать дублирования текста в HTML-коде:

.container {
  display: flex;
  min-height: 80px;
  margin: 5px;
}

.left,
.right {
  background: blue;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.middle {
  background: green;
  flex-grow: 1;
}

.left:before {
  content: var(--tl);
}

.right:before {
  content: var(--tr);
}


/*hidden text*/

.left:after {
  content: var(--tr);
  overflow: hidden;
  height: 0;
}

.right:after {
  content: var(--tl);
  overflow: hidden;
  height: 0;
}

<div class="container" 
  style="--tr:'some text';
         --tl:'mooooore text here'">

  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

<div class="container" 
  style="--tr:'a looooong text here !!!';
         --tl:'a text'">

  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>