使行扩展到可滚动父级的宽度答案

【问题标题】：Make rows expand to scrollable parent's width使行扩展到可滚动父级的宽度
【发布时间】：2022-01-07 21:44:33
【问题描述】：

我正在使用 flexbox 制作类似表格的布局。
它有一个主体、行和单元格。
单元格具有以像素为单位的固定宽度。
正文应该可以水平滚动。

我希望行的宽度与单元格的累积宽度相同。

<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>

有没有办法只使用 CSS 来做到这一点？

附：我知道我可以使用 JS 计算宽度并将其设置为父级，或者我可以将背景颜色设置为祖父级以使其看起来更好，但这不是我需要的。

【问题讨论】：

标签： javascript css sass flexbox

【解决方案1】：

一种方法是不固定子组件的大小，而是使用flex-grow: 1; 让它们占用所有可用大小

.child {
      flex-grow: 1;
      color: white;
      background: blue;
      border: 1px solid black;
    }

或

如果你想强制容器采用子宽度，你必须：

.child 有display: inline-flex;

.parent 有 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;
}

按照这个回复的运行sn-p

.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>

【讨论】：

是的，但我需要它们具有固定的高度，tnx
你需要孩子填充父母身高吗？
对不起，是说宽度
如果你想强制容器为子宽度，你必须使用display: inline-flex 并在子部分强制宽度。我在后果中更新我的回复
太棒了，这确实有效！关键是width: max-content。谢谢！

【解决方案2】：

嗯，就像杰里米的回答一样，您可以将它们设置为占用可用空间

或

您可以将parent 设置为固定宽度，而不是将grand-parent 设置为固定宽度；

.parent {
  display: flex;
  background: red;
  padding: 2em 0;
  width: 800px;
  overflow: auto;
}

我把grand-parent的所有样式都加到parent的样式上

下面的 sn-p 工作得很好：

.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>

【讨论】：

是的，但我需要它像一张桌子，所以每个父母都是表格中的一行......如果它们可以单独滚动，它看起来很奇怪:) thx