This question already has answers here:
text-overflow is not working when using display:flex
(5 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I'm aware of these posts:
Prevent a child element from overflowing its parent in flexbox
text-overflow ellipsis on flex child not working
Why don't flex items shrink past content size?
No answer from there fixes the issue I have in the code snippet below. Here's the html tree:
parent flex column
child flex row
label flex (so I can align text vertically)
The only way I could make it work is by making the label an inline-block, but I'd really like to keep the flex.
What I'd already done:
On the child:
Set white-space: nowrap
Set min-width: 0
Set overflow: hidden
On the parent
Set min-width: 0
Permutate the options above with flex-grow: 1 and max-width: 100%
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
align-items: center;
display: flex;
flex-flow: row nowrap;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
You need to remove flex for .label and to align, use align-items: center; for its parent.
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
align-items: center;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
flex-flow: row nowrap;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
align-items: center;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
Remove:
display: flex;
flex-flow: row nowrap;
If you want it vertically aligned, add this to .label:
margin-top: auto;
margin-bottom: auto;
Related
I have a text-containing element where the text can be very long. I want to hide overflow text and I don't want the text to increase the size of the element or its parents/ancestors.
Adding the following to the element CSS seemed to work at first (from this question, but height not width):
height: 0;
min-height: 100%;
This works on Chrome; however, it doesn't quite seem to work on Safari (mobile or desktop).
Here is an example:
The image shows a side-by-side comparison of Chrome (left) and Safari (right).
The text should be vertically centered but as can be seen, the Safari text is not.
Eventually, if the page height gets too small, the text disappears completely.
The HTML is at the foot of this post (sorry I couldn't get it shorter).
Inspecting via devtools on Chrome (Version 88.0.4324.146) and Safari (Version 13.1.3), both on a Mac, the problem seems to be that the inner element is oversized on Safari.
This seems to be directly caused by the height:0;min-height:100% trick, in that replacing these lines with height:100% causes the centering problem to go away in Safari (but then the layout is perturbed in Chrome when the text is longer).
As I understand it, the min-height:100% should set the inner element's height to the height of the containing block, which (since inner has position:relative and its parent card has display:flex), should be the content box of the parent card element, as described here.
This appears to work as described in Chrome, but not Safari. I am not sure where Safari is getting the height of the inner element from, but it's clearly taller than card.
For context, here is what the original problem that I was having looks like (layout messed up in Chrome when there's a lot of text in the cyan box). This is the problem that I was trying to solve with the height:0;min-height:100%. For this screenshot I removed those lines and just put height:100%. Here's what that looks like (again, Chrome on left and Safari on right)
As you can see, the orange box has disappeared in Chrome (left).
Adding the height:0;min-height:100% back in causes this to render correctly (but with the problem described above, that the text is not vertically centered in Safari - it looks centered here, but that's only because the overflow is hidden so the card appears full of text):
Any insights appreciated. Is this just a bug in Safari? Is there a workaround? Or (more likely) am I just a CSS klutz...
Update: here's what it looks like in Safari devtools. The parent card element has height 938px, but the inner has height 1121px and pushes the bottombar off the screen.
<html>
<head>
<style>
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
position: relative;
}
.page {
background: midnightblue;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.central-column {
display: flex;
flex-direction: column;
}
.bottombar {
background: orange;
height: 80px;
z-index: 30;
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 2vh;
text-align: center;
}
.foo {
background: pink;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.foo,
.central-column {
width: 800px;
max-width: 800px;
height: 100%;
}
.foo .topbar {
background: red;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
min-height: 90px;
height: 15vh;
max-height: 90px;
}
.foo .cardbar {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 4px 20px;
}
.foo .cardtable {
background: green;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 4px;
}
.foo .stack {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 6;
position: relative;
padding: 4px 20px;
}
.foo .stack .card {
background: cyan;
position:relative;
max-height: 160vw;
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 2vh;
border-width: 1px;
border-style: solid;
}
.foo .stack .card .inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 0;
min-height: 100%;
/*
Replacing the previous two lines with this line fixes the centering on Safari,
but then longer text (that would overflow the cyan box) breaks the layout in Chrome
height: 100%;
*/
text-align: center;
overflow: hidden;
margin: 4px;
}
</style>
</head>
<body>
<div class="page">
<div class="central-column">
<div class="foo">
<div class="topbar">
</div>
<div class="cardbar">
<div class="cardtable">
<div class="stack">
<div class="card">
<div class="inner">
<div class="content">
this text should be vertically centered in the cyan box
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
</div>
</div>
</body>
</html>
Here is a simplified example (I removed a couple elements from your code just to make it easier to read). The scroll element needs two things: a parent with overflow:hidden, and an ancestor with a height property (can't be auto). Then to center the non-overflowing content, just use flexbox on the parent, and margin:auto on the content element.
*** UPDATE
A better explanation of what is going on with your code:
You want to center a content block while making the parent hide its overflow if any.
For overflow to work it needs a parent with a height otherwise it will not know where to cut off the content.
To vertically center the content box within the available space, set the parent to display:flex.
The important part: the content block has to be centered using margin:auto otherwise when there is overflow, it will remain centered with its top and bottom parts being cut-off by the parent's overflow:hidden.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.page {
/* Set height for overflow element ancestor */
height: 100%;
max-height: 100vh;
display: flex;
background: blue;
justify-content: center;
}
.central-column {
flex-basis: 100%;
max-width: 90%;
display: flex;
flex-direction: column;
height: 100%;
}
.topbar {
height: 20%;
flex-shrink: 0;
background: red;
}
.cardbar {
flex-grow: 1;
display: flex;
/* Parent of the scroll element hide overflow */
overflow: hidden;
}
.cardtable {
padding: 20px;
background: white;
display: flex;
flex-basis: 100%;
}
.card {
background: cyan;
padding: 30px;
/* Margin auto to center the content */
margin: auto;
text-align: center;
}
.bottombar {
height: 20%;
flex-shrink: 0;
background: red;
}
<div class="page">
<div class="central-column">
<div class="topbar">
</div>
<div class="cardbar">
<div class="cardtable">
<div class="card">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
</div>
*** UPDATE 2
Here it is with your HTML.
body,
html {
padding: 0;
margin: 0;
min-height: 100%;
}
.page {
width: 100%;
display: flex;
justify-content: center;
background: navy;
height: 100vh;
}
.central-column {
flex-basis: 100%;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.foo {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: stretch;
height: 100%;
}
.topbar,
.bottombar {
height: 20%;
background: coral;
flex-shrink: 0;
}
.cardbar {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 10px 20px;
background: pink;
flex-grow: 1;
overflow: hidden;
}
.cardtable {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 10px 20px;
background: forestgreen;
flex-grow: 1;
overflow: hidden;
}
.stack {
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: stretch;
background: lightblue;
flex-grow: 1;
overflow: hidden;
}
.card {
display: flex;
flex-direction: column;
align-items: stretch;
flex-grow: 1;
}
.inner {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.content {
margin: auto;
padding: 10px;
text-align: center;
}
<div class="page">
<div class="central-column">
<div class="foo">
<div class="topbar">
</div>
<div class="cardbar">
<div class="cardtable">
<div class="stack">
<div class="card">
<div class="inner">
<div class="content">
this text should be vertically centered in the cyan box
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
</div>
</div>
When I give a line-height to the text div(span, p, etc.) and drag it in the browser, the selection box has an ugly empty space like this:
I want to lift up the text itself inside of the selection box for looking more better when the user is dragging it. I've searched about this topic on Google but couldn't find any clues to do this.
Are there any ways to solve this problem?
Code:
* {
margin: 0 auto;
padding: 0;
}
div, section {
position: relative;
}
.text {
width: 400px;
height: 600px;
font-family: Helvetica;
line-height: 2rem;
/* giving flex doesn't work to the text itself. */
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
/* again, align-self or content doesn't affected to the text. */
align-self: center;
align-content: center;
border: 1px solid black;
}
p {
display: inline-flex;
vertical-align: center; /* vertical align doesn't work to the text */
align-self: center;
align-content: center;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
[enter image description here][1]
I give you the sample code.
.text {
width: 400px;
height: 600px;
font-family: Helvetica;
display: flex;
border: 1px solid black;
}
p {
align-self: center;
// line-height: 3em;
margin: 1em;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
[1]: https://i.stack.imgur.com/hGxMS.png
I have a child element inside a parent container, the child has element a width of 50%, and a min-width of 30rem.
When I bring the window size in the from the right, after the child element hits its min-width of 30rem it starts to break its containing / parent element, despite there being plenty of available space.
Is there anyway of setting it so the min-width value of 30rem remains, but when the window is reduced in size it still slides inside the parent element (like it does before the min-width value is hit)?
It's sending me nuts. (In the code StackOverflow code-snippet you'll probably need to view full screen to see the issue)
Codepen: https://codepen.io/emilychews/pen/wXBdvz
body {margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.tl {color: white;}
.section {
position: relative;
display: flex;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 2.48832rem 0;
}
.row {
position: relative;
justify-content: center;
margin: auto;
width: 80%;
box-sizing: border-box;
background: blue;
width: 90%;
right: 5%;
justify-content: flex-start;
padding: 4.299rem 0;
}
.one-col.col-1 {
position: relative;
width: 50%;
margin: 0;
padding: 3.583rem 2rem;
left: 40%;
background: #172731;
min-width: 30rem;
top: 7rem;
color: white;
}
<section class="section">
<div class="row">
<div class="one-col col-1">
<h3 class="tl">Title</h3>
<h3 class="tl"><span id="customerbase">Do your thing</span></h3>
<hr>
<p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="seework" href="#">SEE WORK</a></p>
</div>
</div>
</section>
You'll have to use calc to adjust the left positioning. This is not a perfect solution but I think it achieves what you are after.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.tl {
color: white;
}
.section {
position: relative;
display: flex;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 2.48832rem 0;
}
.row {
position: relative;
justify-content: center;
margin: auto;
width: 80%;
box-sizing: border-box;
background: blue;
width: 90%;
right: 5%;
justify-content: flex-start;
padding: 4.299rem 0;
}
.one-col.col-1 {
position: relative;
width: 50%;
margin: 0;
padding: 3.583rem 2rem;
left: calc(60% - 30rem);
background: #172731;
min-width: 30rem;
top: 7rem;
color: white;
}
<section class="section">
<div class="row">
<div class="one-col col-1">
<h3 class="tl">Title</h3>
<h3 class="tl"><span id="customerbase">Do your thing</span></h3>
<hr>
<p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="seework" href="#">SEE WORK</a></p>
</div>
</div>
</section>
I am trying to build a basic user interface using flexbox, I have this so far..
body,html {
margin:0;
padding:0;
height:100%;
}
.container {
height:100%;
display:flex;
flex-direction:column;
}
.top {
flex:4;
display:flex;
background:wheat;
align-items: center;
justify-content: center;
}
.bottom {
flex:1;
background:teal;
}
.bottom_content {
display:flex;
flex-direction:column;
}
.section1 {
flex:1;
font-size:20px;
text-align:center;
}
.section2 {
flex:1;
}
.btn {
background:red;
color:white;
padding:20px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
</div>
<div class="section2">
<div class="btn">
THIS IS A BUTTON
</div>
</div>
</div>
</div>
</div>
I am trying to achieve this...
How can I make the bottom section with equal height and make the content within it vertically and horizontally centered?
I am also planning on using fittext.js or similar to make the button and the text above fit into the flex item.
Where am I going wrong?
The problem
The issue with your current code is that .bottom is not filling the available space and that the default alignment and justification is being used.
The fix
The desired output can be achieved by doing the following:
Remove flex:1; from .section1 and .section2. This stops these divs from expanding to fill the available space
Add align-items: center; and justify-content: space-evenly; to.bottom_content. This will center align and evenly space out the .section1 and .section2 divs
Add display: flex; to .bottom. This will make .bottom expand to fit the available space
Change flex: 1; to flex: 1 0 auto; on .bottom. This will stop .bottom from reducing in size when the height of the window is small
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.top {
flex: 4;
display: flex;
background: wheat;
align-items: center;
justify-content: center;
}
.bottom {
/*Change*/
flex: 1 0 auto;
background: teal;
/*Add*/
display: flex;
}
.bottom_content {
display: flex;
flex-direction: column;
/*Add*/
align-items: center;
justify-content: space-evenly;
}
.section1 {
/*Remove*/
/*flex:1;*/
font-size: 20px;
text-align: center;
}
.section2 {
/*Remove*/
/*flex:1;*/
}
.btn {
background: red;
color: white;
padding: 20px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
</div>
<div class="section2">
<div class="btn">
THIS IS A BUTTON
</div>
</div>
</div>
</div>
</div>
I have commented some of your code. Please Check
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.top {
flex: 4;
display: flex;
background: wheat;
align-items: center;
justify-content: center;
}
.bottom {
flex: 1;
background: teal;
}
.bottom_content {
display: flex;
flex-direction: column;
}
.section1 {
<!-- flex: 1;
-->font-size: 20px;
text-align: center;
}
.section2 {
flex: 1;
}
.btn {
background: red;
color: white;
padding: 20px;
margin-top: 25px;
}
<div class="container">
<div class="top">
<span>TOP CONTENT</span>
</div>
<div class="bottom">
<div class="bottom_content">
<div class="section1">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </div>
<button class="btn">
THIS IS A BUTTON
</button>
</div>
<!-- <div class="section2"> -->
<!-- <div class="btn"> -->
<!-- THIS IS A BUTTON -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
justify-content:center and display:flex is the key.
you can adjust margin as you wish,besides it should do the trick.
.bottom_content {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.section2 {
flex: 1;
display: flex;
justify-content: center;
}
.btn {
background: red;
color: white;
padding: 20px;
width: fit-content;
position: absolute;
margin-top: 10px;
}
I am trying to use flexbox with susy, but somehow it won't work.
I tried all questions I found here but it always breaks and doesn't keep the same height for text containers and image containers, mobile view works from 38 em on it doesnt.
This is what I tried, as soon as I add display: flex to the listed items in the container it displays all in one row, instead of stacked.
I also figured I have to use display box for the image...
http://codepen.io/HendrikEng/pen/wWyBGv
<div class="l-wrap-page">
<!-- Start Main Content Wrapper -->
<div class="l-wrap-main">
<!-- Start Quote -->
<div class="c-quote">
<h2 class="c-quote__title">Quote</h2>
<div class="c-quote__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<button class"o-btn">mehr</button>
</div>
<!-- End Quote -->
<!-- Start Content Block -->
<div class="c-block">
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
<div class="c-block__item">
<div class="o-media">
<img src="http://dummyimage.com/650x325/000/fff" alt="">
</div>
</div>
<div class="c-block__item">
<div class="c-block-article">
<h3 class="c-block-article__title">Headline</h3>
<div class="c-block-article__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button class"o-btn">mehr</button>
</div>
</div>
</div>
</div>
<!-- End Content Block -->
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.l-wrap-page {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: -owg-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: -webkit-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.l-wrap-page:after {
content: " ";
display: block;
clear: both;
}
.l-wrap-main {
width: 100%;
float: left;
}
.c-quote {
width: 100%;
float: left;
}
.c-block {
width: 100%;
float: left;
}
.c-block:after {
clear: both;
content: '';
display: table;
}
.c-block__item {
width: 100%;
float: left;
}
.c-block__item:last-child {
float: right;
}
#media (min-width: 39.8em) {
.l-wrap-main {
width: 100%;
float: left;
}
.c-quote {
width: 100%;
float: left;
}
.c-block {
width: 100%;
float: left;
}
.c-block:after {
clear: both;
content: '';
display: table;
}
.c-block__item:nth-child(1), .c-block__item:nth-child(5) {
width: 50%;
float: left;
background: rgba(248, 208, 220, 0.5);
}
.c-block__item:nth-child(3), .c-block__item:nth-child(8) {
width: 50%;
float: right;
background: rgba(248, 208, 220, 0.5);
}
.c-block__item:nth-child(2), .c-block__item:nth-child(6) {
width: 50%;
float: right;
background: rgba(248, 250, 251, 0.5);
}
.c-block__item:nth-child(4), .c-block__item:nth-child(8) {
width: 50%;
float: left;
background: rgba(248, 250, 251, 0.5);
}
.c-block__item:last-child {
float: right;
}
}
h2 {
font-size: 48px;
}
h2.o-headline {
text-align: center;
}
.c-block__item img {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: block;
width: 100%;
}
.l-wrap-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-block {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Here are just a few:
justify-content: flex-start - flex items will stack at the start of the line
flex-wrap: nowrap - flex items are forced to stay in a single line
flex-shrink: 1 - flex items are allowed to shrink
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
Note the last setting. If you want your flex items to stack vertically, override this default setting (on the container) with flex-direction: column.
OR, you could turn on wrap (flex-wrap: wrap) and give each item enough width to force it to the next line. For example, width: 100% on each item, with wrap on the container, can create a single column of flex items.
For more info about flex equal height columns see:
Equal Height Columns with Flexbox
Equal height rows in a flex container
In this case, try update the .c-block rule like this
Updated codepen
.c-block {
display: flex; /* added property */
flex-wrap: wrap; /* added property */
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}