how to stretch the first element in a row of elements

Question

.eltops {
   display: flex;
   background: #eee;
   color: white;
 }

 .elmark {
   background: blue;
 }

 .sbtn {
   background: green;
   border-right: 2px solid gold;
   padding: 0 9px;
 }

<div class='eltops'>
   <div class='elmark'></div>
   <div class='sbtn'>X</div>
   <div class='sbtn'>P</div>
 </div>
 <br>
 <div class='eltops'>
   <div class='elmark'></div>
   <div class='sbtn'>X</div>
   <div class='sbtn'>P</div>
   <div class='sbtn'>C</div>
 </div>

.eltops is a row of elements

.elmark is always single. It is empty (without any text inside) and should be on the left side and stretched via all available space.

.sbtn are of various count (2-3-4-5) and should be on the right side

how to do this, using flex or grid?

Answer 1

If you wanted to expand the blue div to full width, this is how you do it.

.eltops {
  display: flex;
  background: #eee;
  color: white;
}

.elmark {
  background: blue;
  flex: 1;
}

.sbtn {
  background: green;
  border-right: 2px solid gold;
  padding: 0 9px;
}

<div class='eltops'>
  <div class='elmark'></div>
  <div class='sbtn'>X</div>
  <div class='sbtn'>P</div>
</div>
<br>
<div class='eltops'>
  <div class='elmark'></div>
  <div class='sbtn'>X</div>
  <div class='sbtn'>P</div>
  <div class='sbtn'>C</div>
</div>

Answer 2

Just make this change:

.elmark {
  background: blue;
  flex-grow: 1;
}

Answer 3

Just use flex:1 or any value you see fit, this will make .elmark stretch for the size available.

.eltops {
    display: flex;
    background: #eee;
    color: white;
}

.elmark {
    background: blue;
    flex: 1
}

.sbtn {
    background: green;
    border-right: 2px solid gold;
    padding: 0 9px;
}

<div class='eltops'>
    <div class='elmark'></div>
    <div class='sbtn'>X</div>
    <div class='sbtn'>P</div>
</div>
<br>
<div class='eltops'>
    <div class='elmark'></div>
    <div class='sbtn'>X</div>
    <div class='sbtn'>P</div>
    <div class='sbtn'>C</div>
</div>