flex box button element not getting 50% of width

Question

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex:0 0 1;
  border:1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

`div button{ width:49.5%; border:1px solid gray; }` Is that ok? — dorado, Nov 13 '17 at 07:22
I am using a inbuild component. it has scenario like what is posted. but not working for me — 3gwebtrain, Nov 13 '17 at 07:24

score 1 · Answer 1 · answered Nov 13 '17 at 08:33

1

Try this

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex: 1;
  border:1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

answered Nov 13 '17 at 08:33

Atanu Mallick

score 0 · Answer 2 · answered Nov 13 '17 at 07:50

0

First, you have a typo "dispaly:flex;". :)
Second, just put flex-grow: 1; on the buttons.
Example code:

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex-grow: 1;
  border:1px solid gray;
}

Hope it helps.

answered Nov 13 '17 at 07:50

Nope. If the button text in one button is larger then the button will be larger than 50%. `flex-basis: 50%` is correct. – Jason Moore Nov 27 '18 at 15:45

score 0 · Answer 3 · answered Nov 13 '17 at 11:30

0

Should be this.

div {
  display: flex;
  border: 1px solid red;
}

div button {
  flex: 0 0 50%;
  border: 1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

answered Nov 13 '17 at 11:30

user8224713

3 Answers3