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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>