How to make 2 columns same width size? flex box - css

Question

As you see in this image.
I makes this design with display flex using CSS3
All I want is that make number 5 and 10 same width, but not fixed width but makes number 10 takes its width from number 5 and vice versa.
.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

Your problem can be solved using CSS grid, no need to use flexbox since your problem is based on a 2 Dimensional layout
.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>
I hope this solves your query.

Answer 2

I think you need something like this, But why the width of your flex items are 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>
I hope it helps.