Как сделать 2 колонки одинакового размера по ширине? гибкая коробка

Question

Как вы видите на этом изображении. Я делаю этот дизайн с помощью flex flex, используя CSS3. Все, что я хочу, это чтобы номера 5 и 10 имели одинаковую ширину, но не фиксированную ширину, но чтобы число 10 брало свою ширину из числа 5 и наоборот.

.flexed{
width:100%;
}
.flexed .flex{
display:flex;
}
.flexed .flex div{
width:100%;
}

<div class="flexed">
        <div class="flex head">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>text text text text</div>
        </div>
        <div  class="flex body">
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
</div>

Answer 1

Ваша проблема может быть решена с помощью CSS сетки, нет необходимости использовать flexbox, так как ваша проблема основана на 2-мерном макете

.container {
  width: 100%;
}

.container .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
  grid-gap: 10px
}

.container .grid div {
  border: 1px solid red;
  padding: 10px;
}

<div class="container">
  <div class="grid head">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum obcaecati beatae, exercitationem delectus neque suscipit corporis animi aspernatur. Dolor maxime, facilis labore aut inventore esse possimus a sunt voluptatum fuga?</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</div>

Надеюсь, это решит ваш запрос.

Answer 2

Я думаю, вам нужно что-то подобное, но почему ширина ваших гибких элементов составляет 100%?

.flexed{
    width:100%;
}
.flexed .flex{
    display:flex;
}
.flexed .flex div{
    overflow: hidden;
    flex: 1 1 0px;
}

<div class="flexed">
        <div class="flex head">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>text text text sdvsdvsvsdvsdtext</div>
        </div>
        <div  class="flex body">
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
</div>

Надеюсь, это поможет.