Thanh-Quy Nguyen
Reputation: 3235
Why are my columns wrapping to a new line when their combined width should be 99%?
I'm currently trying to design a Mendeleiev table using only HTML and CSS (CSS3, including Flexbox). Basically I need each of the boxes to be 1/18 ~= 5.55% of the window width to be responsive. However, CSS seems to highly miscalculate this value.
Here is a sample of my code
body {
size: 15px;
background: #ff9999;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.line {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.56%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight {
font-size: 10px;
text-align: right;
}
.el {
font-size: 25px;
text-align: center;
font-weight: bold;
}
.no {
font-size: 10px;
text-align: left;
}
.right {
justify-content: flex-end;
}
.wrap {
flex-wrap: wrap;
}<div class="container">
<!-- Debut 4e ligne -->
<div class="line wrap">
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
4.00
</div>
<div class="el">
He
</div>
<div class="no">
2
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
</div>
<!-- Fin 4e ligne -->
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>It is very repetitive (18 columns), but as you should see when pasting it, there are 4 boxes that will not fit on the line (proven with flex-wrap) even when the total of 18*5.55% = 99.9%.
Why such a difference?
Upvotes: 1
Views: 70
Answers (2)
Tyler Roper
Reputation: 21672
This is simply because your boxes have width and padding. Padding is additive, meaning if you do width: 500px; padding: 10px;, the result is an element that's 520px wide.
What you can do is apply box-sizing: border-box; to your .box element to make the padding apply inward instead of outward, thus maintaining its set width.
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.56%;
box-sizing: border-box;
}
Working snippet:
body {
size: 15px;
background: #ff9999;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.line {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.55%;
box-sizing: border-box;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight {
font-size: 10px;
text-align: right;
}
.el {
font-size: 25px;
text-align: center;
font-weight: bold;
}
.no {
font-size: 10px;
text-align: left;
}
.right {
justify-content: flex-end;
}
.wrap {
flex-wrap: wrap;
}<div class="container">
<!-- Debut 4e ligne -->
<div class="line wrap">
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
4.00
</div>
<div class="el">
He
</div>
<div class="no">
2
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
</div>
<!-- Fin 4e ligne -->
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>Upvotes: 3
Bobby Jack
Reputation: 16018
Width, in this context, is in addition to padding and border. Try starting with:
.box { box-sizing: border-box; }
and you should see a difference. Combined with 5.55% (not 5.56%) width, that fits perfectly for me.
Upvotes: 4
Related Questions
- When flexbox items wrap in column mode, container does not grow its width
- Why does "flex-wrap: wrap" in my css cause the text cells to make a single column?
- Flex box column showing up as a row (side by side) instead of the next item going into next line
- Divs not wrapping horizontally
- Flex Column Wrapping and Flex Basis 100% Extra Space
- Flex items not wrapping in a column direction container
- Make column content width, not width: 100%
- Flexbox columns not keeping equal width
- CSS flex :column. Not taking full width of parent
- How to keep the same width for columns