html - Div 内部的 Div 填充整个父 DIV,不显示 :Table

标签 html css flexbox

<分区>

我正在尝试创建类似于包含行和单元格的表格的内容,但我不想使用行和单元格,我目前使用的是 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>

最佳答案

来自 MDN :

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space.

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

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

Demo

关于html - Div 内部的 Div 填充整个父 DIV,不显示 :Table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43233331/

相关文章:

html - 如何更改 CSS 线性渐变背景高度(厚度)?

javascript - 选择靠近另一个的列表元素

javascript - 无法将图像对象与其他 HTML 元素一起放置

html - Chrome 和 Firefox 中可折叠元素的不同行为

css - CSS 和 display flex 问题

javascript - JQuery 单击表格按钮

javascript - 附加的 div 位置不正确

html - 无法弹出子菜单

html - 我希望我的 div 的边界完全重叠,但是当我将它们与 flex 对齐时会变得奇怪

html - IE 11 flexbox 子宽度不考虑内容(Safari 也是)