div中的Div填充完整的父DIV没有显示：表

我想创建类似于行和单元格的表，但我不想使用行和单元格，我目前使用DIV元素和所有内容直到我尝试调整内部DIV元素的宽度以填充其父DIV（这将是行）的宽度，而不必对所需百分比进行精确计算。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>

来源

2017-04-05 lxxtacoxxl

究竟是什么你想实现什么？ – Ryan

从MDN：

柔性CSS属性是一个速记属性指定柔性项目，以改变其尺寸以填充可用空间的能力。

您需要提供flex: 1;到.container > div > div扩大内div元素。

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

Demo

来源

2017-04-05 14:00:50

可以使用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>

来源

2017-04-05 14:00:51 sol

或许这就是你需要什么？（最里面的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>

来源

2017-04-05 14:05:44

在这里，我对您的CSS的变化，但你需要做的柔性当您尝试自动增长您的div。看看.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>

来源

2017-04-05 14:06:37 dutchsociety

div中的Div填充完整的父DIV没有显示：表

回答

相关问题