Div не принимая всю ширину детей

Question

Я хочу расположить два элемента div рядом с flexbox.

Внутри моих div элементов у меня есть label с позиционированием absolute и span.Моя проблема в том, что элементы div не принимают полную ширину label, если label имеет большую ширину, чем диапазон.Как я могу убедиться, что элементы div занимают всю ширину своих дочерних элементов?

Минимальный пример : http://jsfiddle.net/khbg9w50/2/

#flex-container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: auto;
  background-color: rgba(0, 255, 0, 0.4);
}

.label {
  position: absolute;
  top: 0;
  font-size: 10px;
  background-color: rgba(255, 0, 0, 0.4);
}

<div id="flex-container">
  <div class="container">
    <label class="label">A Very, Very Long Labeltext</label>
    <span>Example 1</span>
  </div>
  <div class="container">
    <label class="label">A Very, Very Long Labeltext</label>
    <span>Example 2</span>
  </div>
</div>https://stackoverflow.com/posts/55665051/edit#

Заранее спасибо!

Answer 1

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

Не вижу смысла использовать position:absolute в вашем примере кода. Просто сделайте ярлыки display:block. Или, если вам нужно, чтобы надписи оставались на своей естественной ширине, вместо этого сделайте span {display:block;}.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: auto;
  background-color: rgba(0, 255, 0, 0.4);
}

.container label {
  /* display:block; */
  font-size: 10px;
  background-color: rgba(255, 0, 0, 0.4);
}
.container span {
  display:block;
}

<div class="flex-container">
  <div class="container">
    <label>A Very, Very Long Labeltext</label>
    <span>Example 1</span>
  </div>
  <div class="container">
    <label>A Very, Very Long Labeltext</label>
    <span>Example 2</span>
  </div>
  <div class="container">
    <label>A short one</label>
    <span>Example 3</span>
  </div>
</div>

PS. id должен быть уникальным.

UPDATE

Теперь я понимаю, что вы, возможно, не захотите, чтобы все ваши метки имели полную ширину (например, в случае коротких меток. В этом случае было бы более разумно установить span как display: block, а не чем ярлык. Я обновил свой ответ соответственно.