I’m making a table-like layout using flexbox.
It has a body, rows and cells.
Cells have the fixed widths in pixels.
Body should be horizontally scrollable.
I would like to achieve that rows have the same width as cumulative widths of cells.
Here’s the codepen.
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>
Is there any way to do this using CSS only?
P.S. I know I can calculate the widths using JS and set that to parent, or I can set the background color to grand-parent to make it look nicer, but that's not what I need here.
one way is to not fix size on child component but use flex-grow: 1; to let them take all available size
.child {
flex-grow: 1;
color: white;
background: blue;
border: 1px solid black;
}
OR
if you want to force container to take child width you have to :
.child have display: inline-flex;
.parent have width: max-content;
.parent {
background: red;
padding: 2em 0;
width: max-content;
}
.child {
display: inline-flex;
width: 300px;
color: white;
background: blue;
border: 1px solid black;
}
following the running snippet of this reply
.grand-parent {
width: 800px;
overflow: auto;
}
.parent {
display: flex;
background: red;
padding: 2em 0;
}
.child {
flex-grow:1;
color: white;
background: blue;
border: 1px solid black;
}
.parent2 {
background: red;
padding: 2em 0;
width: max-content;
}
.child2 {
display: inline-flex;
width: 300px;
color: white;
background: blue;
border: 1px solid black;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}<h1> child take width of parent</h1>
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>
<h1> parent take width of child</h1>
<div class="grand-parent">
<div class="parent2">
<div class="child2">Child 1</div>
<div class="child2">Child 2</div>
<div class="child2">Child 3</div>
</div>
<div class="parent2">
<div class="child2">Child 1</div>
<div class="child2">Child 2</div>
<div class="child2">Child 3</div>
</div>
<div>Well, just like Jeremy's answer, you can set them to take available space
OR
Instead of making the grand-parent fixed-width, you can set the parent to be of fixed width;
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
I took all the styles of grand-parent and added the to the style of parent
The following snippet works perfectly fine:
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
.child {
flex: 0 0 300px;
color: white;
background: blue;
border: 1px solid black;
}<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
</div>