css column expand to fit area

i have:

<div class="a">
  <button>Btn</button>
  <span>Text</span>
  <button>Btn</button>
</div>

<div class="a">
  <button>Btn</button>
  <span>Text</span>
  <button>Btn</button>
</div>

button {
  width: 4em;
}

button {
  width: 4em;
}

how can i make the span expand to fit the area given. *div is inside another element with a width.

6 Replies

NatejoestevOP•12mo ago

also, i might want to add more buttons around the span

If you’re using flex, you could give the span a flex grow:1

b1mind•12mo ago

Or control it all with a grid-template 😄 grid-template-columns: auto 1fr auto;

b1mind•12mo ago

CodePen

...

b1mind•12mo ago

Grid can often times give you much more flexibility than flex 🥁 But also its going to want to fill space not shrink children by default

NatejoestevOP•12mo ago

exactly like #4 but btn span btn btn and the span expands