Andrey Kaydalov Andrey Kaydalov - 4 months ago 8
CSS Question

How to tretch multiple inline-blocks to fill all the space of parent?

after lot of searching, I haven't found a solution to my problem, so it's time to ask here.

Here's the problem: I have a block-rendered div and a variable number of buttons rendered as inline-block inside that div. I would like those buttons to stretch evenly to fill al the space of a parent, like, if I have 3 buttons they would stretch to 33% width, if 2 that would be 50%, and so on.

Can that be done with pure css? Thanks in advance.

Answer

You can use css flexbox:

.btn-holder {
  margin-bottom: 15px;
  display: flex;
}

.btn-holder button {
  flex-grow: 1;
}
<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
</div>
<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
</div>

Comments