Equal width flex columns when the container has fluid width-CodePudding

Consider the following HTML code:

<div >
    <div >
        <div > #00019405 </div>
        <div >  Placed by: 18175  </div>
    </div>
    <div >
        <div > Unpaid </div>
        <div  >Pending </div>
    </div>
</div>

with the following css:

.ungrouped-ordered-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.information-container {
    display: flex;
    flex-direction: column;
}

.indicator-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.indicator-container .indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 0 10px;
  border: 1px solid #2e2240;
}

The design I am aiming for, is:

to let the outermost flex containers (.ungrouped-ordered-item) children, grow as they need, and leave space between them, so that they are aligned to the left and right respectively of their containers
to make the children of the inner flex container (.indicator-container .indicator) be equal-width, by taking up the width of the wider element (in this case, it being the element with the text "Pending")

My first goal is achieved, but it seems, that even if adding flex: 1 to the .indicator containers, the browser will not correctly calculate the width of the two elements, and they will have uneven widths. I am presuming that this is because that their container, .indicator-container, has a fluid width. Am I right in this? How can I achieve my desired effect with all fluid width containers? (preferably without javascript).

Here's a fiddle also!

CodePudding user response：

What is the argument against a width:50% for the .indicatorbox?

.ungrouped-ordered-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.information-container {
  display: flex;  
  flex-direction: column;  
}

.indicator-container {  
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;  
}
.indicator-container > * {
  border: 1px solid #2e2240;  
  padding: 0 10px;
  flex-wrap: wrap;  
}

.indicator-container .indicator {  
  width: 50%;
  text-align: center;
}

<div >
    <div >
        <div > #00019405 </div>
        <div >  Placed by: 18175  </div>
    </div>
    <div >
        <div > Unpaid </div>
        <div  >Pending long long</div>
    </div>
</div>

CodePudding user response：

Changing the .indicator-container class from flex to grid and using automatic columns solves my problem. Although, it doesn't have as much coverage as flex, for my needs, this works:

.indicator-container {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
}

Here's the updated fiddle also.