Сделайте элементы равными самому широкому столбцу и центру

Question

У меня есть две клетки рядом.

Ячейки ограничены внутренним контейнером, а этот контейнер - внешним контейнером.

Идея состоит в том, чтобы две ячейки были одинаковой ширины, хотя их содержимое не равно.

Ширина каждой ячейки должна соответствовать ширине самого широкого элемента.

Внутренний контейнер будет центрирован (ширина должна быть в два раза больше самой широкой ячейки).

На данный момент у меня есть два результата:

1. Они имеют одинаковую ширину, но расширяются до половины доступной ширины страницы.
2. Внутренний контейнер сжимается к центру, но ячейки неровные в ширину.

Можно ли достичь того, чего я хочу, без JavaScript?

body {
  background-color: lime;
}
.container {
  margin: 20px;
}

.fb {
    display: flex;
    justify-content: center;
}
.fb-container {
    display: flex;
    align-items: center;
    flex: 1;
    /* flex: 0; */
    
    background-color: #fff;
    border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    color: rgba(0,0,0, .87);
    font-size: 14px;    height: 46px;
    padding: 0 16px;
}

.fb-item:not(:first-child) {
    border-left: solid 1px rgba(0,0,0,.12);
}

<div class="container">
    <div class="fb">
        <div class="fb-container">
            <div class="fb-item">
                <span class="fb_label">Much longer</span>
            </div>
            <div class="fb-item">
                <span class="fb_label">Short</span>
            </div>
        </div>
    </div>
</div>

Answer 1

Это больше подходит для сетки CSS.Вы можете оставить флексбокс для центрирования.

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: grid; /* Added this */
  align-items: center;
  grid-template-columns: 1fr 1fr; /* Added this */
  /* to replace the middle border*/
  grid-gap:1px;
  background:#e6e6e6 padding-box;
  /* */
  border: solid 0.1rem #e6e6e6;
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background-color: #fff;
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

Или хакерская идея с flexbox, которую я не рекомендую:

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {
  display: flex;
  justify-content: center;
}

.fb-container {
  display: flex;
  flex-direction:column; /* This will make them both equal */
  transform:translateX(-50%); /* Hack */
}

.fb-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .87);
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
  background:#fff;
  border: solid 0.1rem rgba(0,0,0,.12);
}
.fb-item:not(:first-child) {
  border-left: none;
  transform:translateY(-100%) translateX(100%);  /* Hack */
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much loooooooonger</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

Answer 2

Это также выглядит для меня как типичная раскладка таблицы (через display:table) без какого-либо взлома и должно быть доступно до IE8 :

table-layout см.https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

auto

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

fixed

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

При «фиксированном» методе компоновки всю таблицу можно отобразить после загрузки и анализа первой строки таблицы.Это может ускорить время рендеринга по сравнению с «автоматическим» методом макета, но последующее содержимое ячейки может не вписаться в предоставленную ширину столбца.Ячейки используют свойство переполнения, чтобы определить, следует ли обрезать какое-либо переполнение содержимого, but only if the table has a known width; в противном случае они не переполнят ячейки.

DEMO:

body {
  background-color: lime;
}

.container {
  margin: 20px;
}

.fb {/* can be removed  
  display: flex;
  justify-content: center;
  */
}

.fb-container {
  display:table;
  table-layout: fixed;/* reset table-layout */
  margin:auto;
  background-color: #fff;
  border: solid 0.1rem rgba(0, 0, 0, .12);
}

.fb-item {
  display: table-cell;
  color: rgba(0, 0, 0, .87);
  width: 50%;/* make cols same width , adjust to numbers of ccols */
  vertical-align: middle;
  font-size: 14px;
  height: 46px;
  padding: 0 16px;
}

.fb-item:not(:first-child) {
  border-left: solid 1px rgba(0, 0, 0, .12);
}

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much longer</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="fb">
    <div class="fb-container">
      <div class="fb-item">
        <span class="fb_label">Much much longer</span>
      </div>
      <div class="fb-item">
        <span class="fb_label">Short</span>
      </div>
    </div>
  </div>
</div>

Answer 3

Вы можете сделать элементы одинакового размера, но без условного размера с помощью CSS, просто установите ширину 0, чтобы flex слушал растущий текст, а не текст.

div {
  display:flex;
}

div div {
  flex-grow:1;
  border :1px solid black;
  width:0;
}

https://codepen.io/logan-murphy/pen/ewyqQG