Why does "flex-wrap" not taking up the whole width of parent div when there is a border in parent?

Question

:root {
    --basic-color-gray: rgba(216, 216, 216, 0.616);
    --dark-gray: rgba(88, 86, 86, 0.616);
    --basic-color-blue: rgb(0, 89, 255);
}


* {
    box-sizing: border-box;
}

body {
    background-color: rgba(14, 22, 34);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
} 


.number {
    border: 1px solid var(--basic-color-gray);
    height: 60px;
    width: 60px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    color: var(--basic-color-blue);
    flex-wrap: wrap;    
}
 
.notes-in-board {
    width: 20px;
    height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid white;
}

<div class="line" id="line">
  <div class="number" id="number">
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
  </div>
</div>

When I remove border in .number , the enclosing div takes up the whole width of 60px with dispaly:flex and flex-wrap: flex. but with the border in parent div, each line only holds two child divs with 20px in width. Why is that? and how can I work around it? what is the best way to do this?

@AliZeinalzadeh yes. with or without it, child divs still not taking the whole width. There should be 3 child divs in each row. — typing..., Mar 15 '22 at 22:24

score 0 · Answer 1 · answered Mar 16 '22 at 01:38

Add box-sizing: content-box; to your .number class and it'll work as intended.

When you set it to border-box, the box width of 60px will include the border width of 1px. That is, its inside content area is reduced to 58px, making its flex-children wrap.

To avoid this, you could either remove the fixed width from its children, or change the parent to content-box. See the working snippet below.

:root {
  --basic-color-gray: rgba(216, 216, 216, 0.616);
  --dark-gray: rgba(88, 86, 86, 0.616);
  --basic-color-blue: rgb(0, 89, 255);
}

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(14, 22, 34);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.number {
  border: 1px solid var(--basic-color-gray);
  height: 60px;
  width: 60px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  color: var(--basic-color-blue);
  flex-wrap: wrap;
  box-sizing: content-box;
}

.notes-in-board {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}

<div class="line" id="line">
  <div class="number" id="number">
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
    <div class="notes-in-board">
      1
    </div>
  </div>
</div>

Why does "flex-wrap" not taking up the whole width of parent div when there is a border in parent?

1 Answers1