Make flexbox item width equal to combined width of brother elements - html

Question

I have a row of fixed width flex items, and a footer element that should span the width of the combined elements above. How can I go about doing this?
Here is what I have so far, however, the bottom row is wider than the width of the first row.
<div class="container">
<div class="container" style="flex-basis: 100%">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
.container {
display : inline-flex;
flex-flow: row wrap;
}
.container > div {
border: 1px solid black;
background: #ececec;
}
https://jsfiddle.net/y1kham4u/1/

Answer 1

you better reset flex-direction than flex-wrap:
.container {
display: inline-flex;
flex-flow: column;/* no wrapping needed */
}
.container .container {
flex-direction: row;/* reset */
}
.container>div {
border: 1px solid black;
background: #ececec;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="container" style="flex-basis: 100% /* not really needed , but does not hurt */">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>
https://jsfiddle.net/qm9o27ed/ (with also an inline-grid)

Answer 2

OKay first of all
https://flexboxfroggy.com/
play this game this game will help you to learn flex-box its pretty funnier way to learn flex-box properties
and for your problem and Use following jsfiddle
https://jsfiddle.net/dupinderdhiman/4d58c2nh/2/
.container {
display: inline-flex;
flex-flow: column;
border: 1px solid black;
background: #ececec;
}
.innerContainer{
display: flex;
flex-grow: 1;
}
.innerContainer > div {
border: 1px solid black;
background: #ececec;
}
<div class="container">
<div class="innerContainer" style="">
<div style="width: 50px;">Div 1</div>
<div style="width: 50px;">Div 2</div>
<div style="width: 50px;">Div 3</div>
</div>
<div style="width: 100%">Div 4</div>
</div>

Answer 3

https://jarodpeachey.github.io/breeze_css/layout.css
If you use this framework, you can easily create rows. The col-4 means it's 4 out of 12 grid spaces. If we set the width of the row to 150, each div will take up 50 pixels. (*Note: I would recommend using the framework to understand how it works, and then copy the code onto your local machine, as this framework is for my personal use, and the code may change)
<div class="container">
<div class="row m-auto" style="width: 150px">
<div class="col col-4">Div 1</div>
<div class="col col-4">Div 2</div>
<div class="col col-4">Div 3</div>
<div class="col col-12">Div 4</div>
</div>
</div>
Hope this helps!!