Text inside a flex box is wrapping? - html

JS Fiddle
I have two parent boxes positioned next to each other with flex box, inside of them I have another flex box so the h2 and p can sit side by side.
I've not set a width of the parent boxes and ideally I do not want to.
Why is my text content wrapping when there is space for each flex box to expand? In the example the title is wrapping after Is - why can't the h2 expand so This Is Title A appears all on one line?
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
}
h2 {
flex-basis: 40%;
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</div>
</div>


The problem is that percentage lengths use the parent container for reference, and that's missing in your code. The parent of the h2 and p items don't have a defined width.
Once you define a width on the parent (which I know you don't want to do), the problem is resolved. Otherwise, use another unit of length, white-space: nowrap, or some other compromise.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.2 (and 2.1).


Add flex-grow: 1 and a flex-shrink: 0 to your h2. This will prevent the h2 of shrinking. Also, since you are limiting the relative maximum the h2 can grow (40%) it would break anyway.
EDIT:
flex-grow/shrink was missing in the .container>div. Add the rule flex: 1 1 auto; so they expand evenly to fill all the width.
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
flex: 1 1 auto;
}
h2 {
flex: 1 0 40%;
white-space: nowrap:
/*flex-basis: 40%;*/
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</div>
</div>

Related

flex column equal width without specifying width [duplicate]

I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
The first item is a lot bigger than the second. If I have three items, four items, or n items, I want them all to appear on the same line with an equal amount of space per item.
Any ideas?
http://codepen.io/anon/pen/gbJBqM

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px;
Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by #fabb;

You need to add width: 0 to make columns equal if contents of the items make it grow bigger.
.item {
flex: 1 1 0;
width: 0;
}
Detail:
flex: 1 1 0 is the same as
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.

You could add flex-basis: 100% to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1 for the same results as well.
The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}

The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:
setting position: absolute and not setting width or right, or
place it inside a wrapper with display: inline-block
For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.
The solution is to use a grid instead of a flexbox.
When you run this snippet, make sure to click on full page to see the effect properly.
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>

I’m not an expert with Flexbox, but I got there by setting the basis to 50% for the two items I was dealing with. Grow to 1 and shrink to 0.
Inline styling: flex: '1 0 50%',

None of these solutions worked for me, but this did:
.header {
display: flex;
}
.item {
width: 100%;
}
/* Demo styles, for aesthetics. */
.demo {
margin: 3rem;
}
.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</div>

None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.
The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.

On the child element of flex,
flex: 1 1 25%
this will allow to have four items.
If you want to add more items then you can decrease the %.

This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries)).
Example:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
It works like this:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}

I was having a similar issue and found a way to cheat.
As others have said, flex-basis and flex-grow: 1 are the way to keep items the same size, but the last row is an exception when there are too few items (they fill all available space, making them larger than the other items). To stop this from happening, I added an empty spacer item with visibility: hidden and set the flex-grow value inline based on a quick calculation of how many items there were.
This is easier if you know the width of the parent container but even if you don't, you can set the flex-grow value on the spacer using media queries and breakpoints.

Flexbox children have not the same size [duplicate]

I want to use Flexbox that has some number of items that are all the same width. I've noticed that Flexbox distributes the space around evenly, rather than the space itself.
For example:
.header {
display: flex;
}
.item {
flex-grow: 1;
text-align: center;
border: 1px solid black;
}
<div class="header">
<div class="item">asdfasdfasdfasdfasdfasdf</div>
<div class="item">z</div>
</div>
The first item is a lot bigger than the second. If I have three items, four items, or n items, I want them all to appear on the same line with an equal amount of space per item.
Any ideas?
http://codepen.io/anon/pen/gbJBqM

Set them so that their flex-basis is 0 (so all elements have the same starting point), and allow them to grow:
flex: 1 1 0px;
Your IDE or linter might mention that the unit of measure 'px' is redundant. If you leave it out (like: flex: 1 1 0), IE will not render this correctly. So the px is required to support Internet Explorer, as mentioned in the comments by #fabb;

You need to add width: 0 to make columns equal if contents of the items make it grow bigger.
.item {
flex: 1 1 0;
width: 0;
}
Detail:
flex: 1 1 0 is the same as
flex-grow: 1; flex-shrink: 1; flex-basis: 0;
and if the parent container can not provide enough space for the native-size added together of every item (no space to grow), we need to make the width: 0 to give every item the same start point to grow.

You could add flex-basis: 100% to achieve this.
Updated Example
.header {
display: flex;
}
.item {
flex-basis: 100%;
text-align: center;
border: 1px solid black;
}
For what it's worth, you could also use flex: 1 for the same results as well.
The shorthand of flex: 1 is the same as flex: 1 1 0, which is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}

The accepted answer by Adam (flex: 1 1 0) works perfectly for flexbox containers whose width is either fixed, or determined by an ancestor. Situations where you want the children to fit the container.
However, you may have a situation where you want the container to fit the children, with the children equally sized based on the largest child. You can make a flexbox container fit its children by either:
setting position: absolute and not setting width or right, or
place it inside a wrapper with display: inline-block
For such flexbox containers, the accepted answer does NOT work, the children are not sized equally. I presume that this is a limitation of flexbox, since it behaves the same in Chrome, Firefox and Safari.
The solution is to use a grid instead of a flexbox.
When you run this snippet, make sure to click on full page to see the effect properly.
body {
margin: 1em;
}
.wrap-inline-block {
display: inline-block;
}
#div0, #div1, #div2, #div3, #div4 {
border: 1px solid #888;
padding: 0.5em;
text-align: center;
white-space: nowrap;
}
#div2, #div4 {
position: absolute;
left: 1em;
}
#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
margin: 0.5em;
color: white;
background-color: navy;
padding: 0.5em;
}
#div0, #div1, #div2 {
display: flex;
}
#div0>*, #div1>*, #div2>* {
flex: 1 1 0;
}
#div0 {
margin-bottom: 1em;
}
#div2 {
top: 15.5em;
}
#div3, #div4 {
display: grid;
grid-template-columns: repeat(3,1fr);
}
#div4 {
top: 28.5em;
}
<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>
<div id="div0">
<div>
Flexbox
</div>
<div>
Width determined by viewport
</div>
<div>
All child elements are equal size with {flex: 1 1 0}
</div>
</div>
<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>
<div class="wrap-inline-block">
<div id="div1">
<div>
Flexbox
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div2">
<div>
Flexbox
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>
<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>
<div class="wrap-inline-block">
<div id="div3">
<div>
Grid
</div>
<div>
Inside inline-block
</div>
<div>
We want all children to be the size of this text
</div>
</div>
</div>
<div id="div4">
<div>
Grid
</div>
<div>
Absolutely positioned
</div>
<div>
We want all children to be the size of this text
</div>
</div>

I’m not an expert with Flexbox, but I got there by setting the basis to 50% for the two items I was dealing with. Grow to 1 and shrink to 0.
Inline styling: flex: '1 0 50%',

None of these solutions worked for me, but this did:
.header {
display: flex;
}
.item {
width: 100%;
}
/* Demo styles, for aesthetics. */
.demo {
margin: 3rem;
}
.demo .item {
text-align: center;
padding: 3rem;
background-color: #eee;
margin: 0 1.5rem;
}
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
</div>
</div>
<div class="demo">
<div class="header">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
</div>

None of these answers solved my problem, which was that the items weren't the same width in my makeshift flexbox table when it was shrunk to a width too small.
The solution for me was simply to put overflow: hidden; on the flex-grow: 1; cells.

On the child element of flex,
flex: 1 1 25%
this will allow to have four items.
If you want to add more items then you can decrease the %.

This will work even if you wrapping items, like a Grid, but not so simple you should show where it will wrap in media queries)).
Example:
.flex-item {
flex: 0 0 calc(25% - (45px / 4))
}
It works like this:
$n: 4; // Number of columns
$gap: 15px; // Margin pixels
.flex-parent {
display: flex;
gap: $gap;
}
.flex-item {
flex: 0 0 calc(100% / $n - (($n - 1) * $gap / $n));
}

I was having a similar issue and found a way to cheat.
As others have said, flex-basis and flex-grow: 1 are the way to keep items the same size, but the last row is an exception when there are too few items (they fill all available space, making them larger than the other items). To stop this from happening, I added an empty spacer item with visibility: hidden and set the flex-grow value inline based on a quick calculation of how many items there were.
This is easier if you know the width of the parent container but even if you don't, you can set the flex-grow value on the spacer using media queries and breakpoints.

Issue in display flex with text [duplicate]

This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
How to align flexbox columns left and right?
(5 answers)
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I have a header where on the left side there is header name and on the right side, there are a few buttons.
And the problem is, header name splits into two lines at last white space.
I have below code and it's happening because of .right class's width set to inherit.
pls refer the code.
Is there any way for not letting the text to split?
.parent {
width: 100%;
height: auto;
display: flex;
padding: 0.5rem 1rem;
}
.right {
text-align: right;
width: inherit;
}
<div class="parent">
<!---->
<h6>A B C D E</h6>
<div class="right">
buttons
</div>
</div>
JSFiddle

You can simplify the code by assigning flex-grow: 1 to the h6 (the header name). This will have ensure the text grows to fill the most available space in the row. The remaining space will be implicitly given to .right (buttons).
/* default styles */
.parent {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.parent h6 {
flex-grow: 1;
}
<div class="parent">
<h6>A B C D E</h6>
<div class="right">
buttons
</div>
</div>
jsFiddle

You could use justify-content: space-between to evenly distribute your two items within the parent container like so:
.parent {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="parent">
<h6>A B C D E</h6>
<div class="right">
buttons
</div>
</div>

remove width: inherit from right class and add margin-left:auto to align it to the right

You can use flex-shrink property to achieve what you wanted. I have remove width:inherit and used flex-grow property. I assume that would be better in this case.
flex-grow defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
.parent {
box-sizing: border-box;
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
padding: 0.5rem 1rem;
}
.right {
text-align: right;
flex-shrink: 0;
flex-grow: 1;
}
h6 {
flex-shrink: 0;
}
<div class="parent">
<!---->
<h6>A B C D E</h6>
<div class="right">
buttons
</div>
</div>

Vertical alignment flexbox

I am trying to place child elements in parent element using flexbox like in this image -- >
https://ibb.co/Wpph8fP.
I know that this is possible by doing three columns then use flex, then flex-column in the first column and center other two vertically.
The thing is, that I need do this in one parent div. 4th element is wrapped and it creates column with 1st element, then I need to center vertically two other elements.
This is what I have already done:
the code is here https://codepen.io/MrEyelet/pen/wLxygN?editors=1100

To use one flex, first set flex-direction to column and set wrap toflex-wrap.
And, the part that needs to be on two lines has a variable height to avoid line breaks.
Next, set the flex property to none, setting margin enough to make a line break in the part that needs to be on one line. This will force flex items to break and keep the size of the item.
flex - Values[mdn]
none
The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "flex: 0 0 auto".
body {
background: tomato;
margin: 0;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
height: 100vh;
}
.child {
width: 30%;
height: 200px;
margin: 20px 0;
background: indigo;
}
/* add below */
.child:nth-of-type(-n+2) {
flex: 1 0 calc(50% - 40px);
}
/* add below */
.child:nth-of-type(n+3) {
flex: none;
margin: 50% 0;
}
<div class="parent">
<div class="child child-1">
</div>
<div class="child child-2">
</div>
<div class="child child-3">
</div>
<div class="child child-4">
</div>
</div>

Flexbox layout equal widths (paragraph text not wrapping)

The first image is way wider than the other two because of the space taken up by the <p></p> element.
How do I ensure that the p wraps at the width of the flex box?
I have a working bootply.
/* CSS used here will be applied after bootstrap.css */
body { background-color: rgba(20,10,10,.4); }
div.container { background-color: white; }
#media (min-width: 1380px) {
div.container {
width: 1400px; } }
div.container section {
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
}
div.container section div img {
width:100%;
}
div.container section div p {
width: 100%;
}
div.container section div {
border: 1px solid black;
flex-grow:1;
}
div.container section div+div {
margin-left:4rem;
}
div.container section h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container section h2 {
color: #8f825a;
font-size: 1.8rem;
}
<div class="container">
<h3>H3</h3>
<h2>H2</h2>
<section>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>foo dsalkfjds lakfjdlsk fksdalj fldsfjad slkafjdslk fdsajflkds aflkdjsaflkdsjfdslkafjdlks fjlkdsj</p>
</div>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div>
<img src="">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
</section>
</div>

Instead of flex-grow: 1 use flex: 1:
div.container section div {
flex: 1;
}
revised demo
By using flex-grow: 1 by itself, you're leaving the two other flexibility properties at their default values. Namely, flex-shrink: 1 and flex-basis: auto (content width, in row-direction).
By using the flex property you are defining all three properties: flex: 1 is equivalent to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0 (initial main size 0, not auto)
This allows your flex items to be equal width, regardless of their initial main size.
Other answers here are telling you to add flex-basis: 0 to your code. That effectively does the same thing. The spec recommends you use the flex property, however:
7.2. Components of
Flexibility
Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.
For a complete explanation of the difference between flex-basis: auto and flex-basis: 0, see this post: Make flex-grow expand items based on their original size

You can add flex-basis: 30%; to div.container section div:
http://www.bootply.com/moTWJ5T9dB

In Your Example just add - flex-basis: 0; to all divs like this:
div.container section div {
border: 1px solid black;
flex-grow: 1;
flex-basis: 0;
}
This results that the divs get flexible, means they receive the specified proportion of the remaining space. E.g. They all have the same width.