Как заставить контейнер флексбокса распространяться только на самый длинный внутренний элемент?

Question

Я пытаюсь создать ряд flex-контейнеров, каждый из которых состоит из нескольких строк, некоторые из которых могут иметь ширину 1 или 2 столбца: https://jsfiddle.net/f6ot3vce/1/

Вот как я настроил стиль(1 горизонтальный ряд infobox es, где каждый infobox содержит 1 или более рядов из одного или двух столбцов (2x 50% ширины) элементов.

.infoboxes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
}

.infobox_item {
  flex-basis: 50%;
  align-self: flex-start;
}

.single_col {
  flex-basis: 100%;
}

Однако у меня проблемапри этом ширина каждого общего гибкого контейнера увеличивается, чтобы соответствовать странице, когда я бы предпочел, чтобы он соответствовал самому длинному внутреннему элементу каждого контейнера - и больше (если это ясно из моего примера).

Чтомне нужно сделать / изменить? (таким образом, чтобы 2 столбца каждого контейнера соответствовали друг другу).

Answer 1

Боюсь, что на самом деле невозможно достичь такой компоновки просто с помощью display: flex, не прибегая к взломам и / или костылям JavaScript.Это связано с тем, что в игру вступают два «конфликтующих» правила: элемент инфобокса хочет быть на 100% или 50% от родителя (таким образом, ширина дочернего элемента зависит от ширины родителя), и в то же время вы хотите, чтобы инфобокс (родительский), чтобы соответствовать самому длинному элементу инфобокса (таким образом, ширина parend зависит от ширины дочернего элемента)

К счастью, эта компоновка достижима при использовании css grid .Если вы можете обойтись без поддерживаемых более старых браузеров , то вы можете получить этот макет, как показано на в ответвлении вашего примера или во фрагменте ниже:

.infoboxes {
  display: flex;
  flex-direction: row;
  background-color:orangered;
  align-items: flex-start;
}

.infobox {
  border: 2px solid;
  margin: 2px;
  display: grid;
  padding: 1px;
  background-color: cyan;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.infobox_item {
  margin: 1px;
  background-color: yellow;
}

.single_col {
  grid-column: span 2;
}

.center {
  text-align:center;
}

body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 12px;
}

  <section class="infoboxes">
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item single_col">Infobox Item (Single Column)</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">A Really Really Really Really long Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <div class="infobox_item single_col center">Infobox Item (Single Column) (Centered)</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
    <div class="infobox">
      <a class="infobox_item single_col center" href="localhost">Infobox Item (Single Column) (Centered)</a>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <div class="infobox_item">Infobox Item</div>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
      <a class="infobox_item center" href="localhost">Infobox Item (Centered)</a>
    </div>
  </section>

Он в основном изменяет макет flex класса .infobox на grid, устанавливает в нем два одинаково широких столбца, удаляет flex-basis дочерних элементов и для дочерних элементов полной ширины: столбец сетки занимает 2 пробела (span 2)