CODEWITHSUNDEEP
cssflexbox
exclipy
exclipy

Reputation: 1508

Flexbox item widths are affected by padding

See http://jsfiddle.net/56qwuz6o/3/:

<div style="display:flex">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

div div {
    flex: 1 1 0;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 50px;
}

When I have padding set on a flex item (#a), its width (in the border-box sense) is affected. How do I make its computed width ignore the padding? ie. I want each of my boxes to take up 33% of the document width.

Edit: Thanks for the answers so far. But in reality, I actually have more boxes in the row that have a fixed width: ie. at http://jsfiddle.net/56qwuz6o/7/, I want #a, #b and #c to all have the same width.

<div style="display:flex; width: 400px">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
</div>

div div {
    flex: 1 1 33%;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 100px;
}

#d {
    flex-basis: 200px;
    width: 200px;
}

Upvotes: 18

Views: 10305

Answers (4)

Frank N
Frank N

Reputation: 10416

As a broader answer to the problem: All of padding, border, margin appear to be fix deductions of the available total width, before remaining space is divided up within flex-box. Thus, boxes with more padding will in effect gain more space. Best demonstrated with two flex below each other, one with a double column:

(the table as it should be. Bad things applio below ↓)

enter image description here

→ Codepen.

section
  display: flex
  width: 90%

  div   
    flex: 1 1 100%
    background: #aca
    // good to illustrate boundaries, since it has no width effect…
    box-shadow: inset 0 2px 6px rgba(black, .4)
    
  .double
    flex: 2 1 200%

Notes:

auto as flex-basis (the 3rd flex: parameter) is bad, because it looks at actual content. You don't the amount of content make your layout shift. (compare: table-layout: auto). Go with 100%. (Even if that adds up to many hundred percents total.)

ALL of the following will destroy above grid alignment:

border: 8px solid orange
padding-left: 8px
margin-left: 8px

And no, neither value for box-sizing will help against this.

→The best way to pad flex boxes in a given grid is an inner tag (i.e. one with full width and padding).

Upvotes: 5

Paulie_D
Paulie_D

Reputation: 115296

A proper `flex: declartion seems to work.

div div {

  flex: 0 0 33%; 
  /* don't grow, don't shrink, be 33% wide */
  /* flex:1 0 33% works too */
  
  border: 1px solid black;
  box-sizing: border-box;
  }

#a {

  padding-right: 100px;

}
<div style="display:flex">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

Upvotes: 10

SuperVeetz
SuperVeetz

Reputation: 2136

Create Flexbox Styles to make the development process faster 

<style>
  .flex-row {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
  }

  .flexSize-1 {
    flex: 1;
    -webkit-flex: 1;
  }
  .flexSize-1 {
    flex: 2;
    -webkit-flex: 2;
  }
</style>

As long as the flex property is equal for each column, then each column will get be equal size accross the window.

  <div class="flex-row">
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
  </div>

if you ever want 1 column to be larger than another column, give that column the class .flexSize-2 and it will be twice as wide as .flexSize-1

Upvotes: 0

Dan Gamble
Dan Gamble

Reputation: 4165

1 option you have is to set flex-basis: 33.33% or a number relative to the amount of children you have. I'm not sure if there is a way to do it dynamically.

Upvotes: 7

Related Questions