Div 内的 Div 填充整个父 DIV 而不显示：表格 [重复]

Posted 2023-03-05

【中文标题】Div 内的 Div 填充整个父 DIV 而不显示：表格 [重复]

【英文标题】：Divs inside of Div Fill Entire Parent DIV Without Display:Table [duplicate]

【发布时间】：2017-08-31 04:39:56

【问题描述】：

我正在尝试创建类似于包含行和单元格的表格，但我不想使用行和单元格，我目前正在使用 DIV 元素并且一切都很顺利，直到我尝试调整宽度内部 DIV 元素填充其父 DIV（即行）的宽度，而无需对所需百分比进行精确计算。

.container 
    width: 100%;
    display: flex;
    border: 5px solid black;


.container > div 
    width: inherit;
    display: inline-flex;
    border: 5px solid red;


.container > div > div 
    border: 5px solid green;
    height: 50px

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

【问题讨论】：

你到底想达到什么目的？

【参考方案1】：

来自MDN：

flex CSS 属性是指定能力的简写属性 弹性项目以改变其尺寸以填充可用空间。

您需要将flex: 1; 提供给.container > div > div 以扩展内部div 元素。

.container > div > div 
    border: 5px solid green;
    height: 50px

Demo

【参考方案2】：

您可以使用flex 属性：

.container 
  width: 100%;
  display: flex;
  border: 5px solid black;


.container>div 
  width: inherit;
  display: inline-flex;
  border: 5px solid red;


.container>div>div 
  border: 5px solid green;
  height: 50px;
  flex: 1;

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

【参考方案3】：

也许这就是你需要的？ （最里面的 div 也应该继承宽度）

.container 
    width: 100%;
    display: flex;
    border: 5px solid black;


.container > div 
    width: inherit;
    display: inline-flex;
    border: 5px solid red;


.container > div > div 
    width: inherit;
    border: 5px solid green;
    height: 50px

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>

【参考方案4】：

我在这里对你的 CSS 进行了更改，但是当你尝试自动增长你的 div 时你需要做一个 flex。查看.container > div > div 样式。

.container 
    width: 100%;
    display: flex;
    border: 5px solid black;


.container > div 
    width: inherit;
    display: inline-flex;
    border: 5px solid red;
    
    


.container > div > div 
    border: 5px solid green;
    height: 50px;
    flex: 1;

<div class="container">
  <div>
    <div>
      <span>TEST</span>
    </div>
    <div>
      <span>TEST</span>
    </div>
  </div>
</div>