Create equal width flex items

Question

I use flex for layout purposes, but the browser does not distribute the width evenly between the elements.

.parent {
  display: flex;
  width: 200px;
}

.btn1 {
  flex: 1 1 auto;
}

<div class="parent">
  <div class="btn1">
    <button align="left" style="width:100%">Ok</button>
  </div>
  <button align="left" class="btn1">Cancel</button>
  <div>

Run codeHide result

Now I want the buttons to share a 50% / 50% container length.

But that is not what is happening. I tried using flex: 1 1 autoand flex: 1 1 0, but without success.

I know that I can use the OK button directly, and this will solve my problem, but in my specific scenario it is important to wrap its div.

Now, as I understand it, flex should be able to evenly distribute the width and that is my goal here.

One more thing though, I noticed that the contents of the button seem to affect the width, and I want to somehow ignore this effect.

Thank!

JSFiddle example: https://jsfiddle.net/edismutko/cvytLkyp/3/

Answer 1

flex-basis: auto vs flex-basis: 0

flex: 1 1 auto.

, , flex: 1 1 0.

flex-basis.

flex-basis: 0 , flex-grow . , .

flex-basis: auto flex-grow, .

, , flex: 1 1 0, , flex: 1.

: flex-grow

---

button

. , Chrome button.

Reset .

. ( .)

.parent {
  display: flex;
  width: 200px;
}

.btn1 {
  flex: 1;
}

button {
  padding: 1px 0;
  border-left-width: 0;
  border-right-width: 0;
}

<div class="parent">
  <div class="btn1">
    <button align="left" style="width:100%">Ok</button>
  </div>
  <button align="left" class="btn1">Cancel</button>
  <div>

Hide result

---

box-sizing: border-box

- , , width/flex-basis. div?