Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexbox children are not equal despite `flex: 1` and `flex-basis: 0` [duplicate]

Tags:

html

css

flexbox

I have a flexbox with two children. I want both children to have equal size, despite that one has padding and the other doesn't.

Here's a demo. I want the blue and green boxes to be equal in size:

html, body, .container {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  min-width: 0;
  flex-basis: 0;
}

.first {
  background: cornflowerblue;
}

.second {
  background: lightgreen;
  padding: 100px;
}
<div class="container">
  <div class="first"> </div>
  <div class="second"> </div>
</div>

I know that I could use width: 50%, but that's not direction-agnostic and breaks if I add more elements.

like image 500
BonsaiOak Avatar asked Nov 15 '25 17:11

BonsaiOak


1 Answers

You need both the divs to be the 50% (flex:1) and then have another div inside the second one that has the padding. That way both the parents have the same width and the second one has the padding within it.

html, body, .container {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.container > div {
  flex: 1;
}

.first {
  background: cornflowerblue;
}

.second {
  background: lightgreen;
}

.second > div {
  padding: 100px;
}
<div class="container">
  <div class="first">first</div>
  <div class="second">
      <div>second</div>
   </div>
</div>
like image 98
gavgrif Avatar answered Nov 17 '25 08:11

gavgrif



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!