https://codepen.io/daniel-brown/pen/QWjXpXw
I need this li, to have their own height and not someone else’s
Expected outcome
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div>
<li>industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </li>
<li> unknown </li>
<li>Lorem Ipsum is simply dummy text of thver since the 1500s, when an unknown </li>
<li>L printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of the printing and typesettinry's standard dummy text ever since the 1500s, when an unknown </li>
<li>Lorem Ipsum is simply dummy text of Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </li>
<li> when an unknown </li>
<li>Lorem </li>
</ul>
</div>
I can't change it, I have this ul li structure and I have to sort it through the grid
text
text
text
text
text
text
To do that use the css inline property to add height to the li element individually
<li style="height:10px;"> text </li>
But i would rather suggest using the bootstrap grid system, and then assign the height parameter using inline styling :
<div class="container">
<div class="row">
<div class="col-sm">
<ul>
<li style="height:10px;"> text </li>
<li> text </li>
</ul>
</div>
<div class="col-sm">
<ul>
<li> text </li>
<li> text </li>
</ul>
</div>
<div class="col-sm">
<ul>
<li> text </li>
<li> text </li>
</ul>
</div>
Related
I was trying to create a layout with 5 columns,
the height should be stretch by its content,
so i cannot set a fixed height for it,
but it doesn't work in my codepen work
https://codepen.io/yyywork/pen/MWGLJwN
body {
height: 100%;
}
#outer-container {
display: flex;
flex-direction: row;
height: 100%;
}
#inner-container {
flex-grow: 1;
column-count: 5;
height: 100%;
}
.item {
break-inside: avoid;
height: 100%;
}
<div id="outer-container">
<div id="inner-container">
<div class="item item-1">
<b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
<div class="item item-2">
<b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-3">
<b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-4">
<b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-5">
<b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
</div>
</div>
Try to use below CSS its working perfectly on Chrome and Mozilla Firefox.
#inner-container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.item {
flex-basis: calc(100% / 5);
border:1px solid #000;
}
<div id="outer-container">
<div id="inner-container">
<div class="item item-1">
<b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
<div class="item item-2">
<b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-3">
<b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-4">
<b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="item item-5">
<b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
</div>
</div>
</div>
I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.
I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.
Is this possible in some way?
I made a Codepen to illustrate the problem:
http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
#media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Some link
</li>
<li>Some link 2
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Very nice link
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Another link
</li>
<li>Check this item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Link to item
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li>Button to item
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is not possible with flexbox or CSS, in general.
An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".
Here are a few notes to keep in mind:
Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.
Your question:
I want all the h2 headings of the row to be the same height. Is this possible in some way?
Not with CSS. Because the h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.
Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.
The align-self property can be used on individual flex items to override align-items, which can break the equal height feature.
By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.
This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container
More details:
Equal height rows in a flex container
How to disable equal height columns in Flexbox?
Duplicate posts:
How to get header from cards or similar to have the same height with flex box?
CSS - How to have children in different parents the same height?
Positioning nested grid items in a higher level container (a subgrid function)
Align child elements of different blocks
CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
Aligning the child elements of different parent containers
Use flexbox display to align items within a row wrapper
I worked out a jQuery solution based on your example.
Add the class "eh" (equal heights) to each parent element for which you want to align some of the (sub) children, and a data-eh element containing the selectors for the child elements.
<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>
and then use this function:
$('.eh').each(function(){
var $this = $(this);
var equalHeightSelectors = $this.data('eh');
$.each(equalHeightSelectors, function( index, value ) {
var min_height = 0;
var $children = $this.find(value);
$children.each(function(){
var $el = $(this);
if($el.height() > min_height){
min_height = $el.height();
}
});
$children.height(min_height);
});
});
https://codepen.io/pwkip/pen/oNvxNYZ
I have a very simple grid using flexbox where I want to display multi-line data in a scrollable box. I might be missing a trivial property but the row height doesn't appear to adjust itself properly to the height of it's content.
An example: https://plnkr.co/edit/rCXfvd4Vsh8RgoFja89A?p=preview
.grid {
display: flex;
flex-flow: column;
max-height: 400px;
overflow-y: auto;
}
.grid .header {
font-weight: 700;
margin-bottom: 6px;
border-bottom: 3px solid black;
}
.grid .row {
flex: 1;
display: flex;
flex-flow: row;
}
.grid .row:nth-child(even) {
background: #CCC;
}
.grid .col-1 {
flex: 0 0 60px;
}
.grid .col-2 {
flex: 1 0 200px;
white-space: pre;
}
<h1>Flexbox grid</h1>
<h3>Overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
<h3>No overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
To keep everything simple I my columns are fixed size and all the data I want to display is loaded into the grid (instead of using a virtual grid). Is there a way to fix my example so that the rows adjust itself to the content?
EDIT: SOLVED!
As user #bhv pointed out I should have disabled shrink on .row by applying flex: 1 0 auto instead of flex+:1 (1 auto).
.grid {
display: flex;
flex-flow: column;
max-height: 400px;
overflow-y: auto;
}
.grid .header {
font-weight: 700;
margin-bottom: 6px;
border-bottom: 3px solid black;
}
.grid .row {
flex: 1;
display: flex;
flex-flow: row;
flex-shrink: 0;
}
.grid .row:nth-child(even) {
background: #CCC;
}
.grid .col-1 {
flex: 0 0 60px;
}
.grid .col-2 {
flex: 1 0 200px;
white-space: pre;
}
<h1>Flexbox grid</h1>
<h3>Overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">One Line</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
<h3>No overflow example</h3>
<div class="grid">
<div class="row header">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
<div class="row body">
<div class="col-1">DATA</div>
<div class="col-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div>
</div>
</div>
https://plnkr.co/edit/jIoaME?p=preview
Since the total height of your items is higher than their parents max-height, and since the flex-shrink defaults to 1, they will shrink as much as possible to fit.
So by simply change flex-shrink to 0 will prevent that.
Also the flex: 1 cause another change of the defaults, where the flex-basis is set to 0, which will make the items share the space left equally, instead of the default auto, which takes their content into account before the remaining space is calculated.
In your case though, where the parent has no height (and flex-direction: column), flex: 1 has no effect and can be deleted.
I am styling a list outputted by a CMS. I can only insert classes on the outer div. Structure of HTML if fixed.
I used before/after trick in order to give a font-awesome icon as a bullet point but when the viewport is constrained and the point overflows to the second line it can look bad, especially when just one or two words overflow.
Is there any way I can maintain the indent for the overflow text?
Here is my markup:
.green-tick-list li:before {
font-family: 'FontAwesome';
content:"\f00c";
margin:0 5px 0 -15px;
color: #33cc33;
}
.green-tick-list li{
list-style: none;
font-size: 1em;
line-height: 1.6em;
}
#responsive{
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
<h3>Simulating restricted viewport</h3>
<div id="responsive">
<div class="fl-module fl-module-rich-text fl-animation fl-slide-right green-tick-list fl-node-56ec97eb4d7e1 fl-animated" data-node="56ec97eb4d7e1" data-animation-delay="0.5">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply.</li>
<li>Lorem Ipsum is simply dummy text of the printing.</li>
<li>Lorem Ipsum.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
</div>
I'd like the indent of the overflow text to be in line with the start start of the text. Is that possible?
I'm creating multiple 3 column divs on a page. I noticed that if the left column div (data_cell1) is longer than the right column div (data_cell3). The div below goes up into the div above and overlaps it.
What do I need to change in my css to allow there to be separation between each div wrapper?
If the left column div and right column div are the same size, then I don't have this problem.
Here's the code example:
http://jsfiddle.net/huskydawgs/UMf3k/77/
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
<div class="data_cell2">
</div>
<div class="data_cell3">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
Since you are using float on some elements you need to clear after to make the parent take the complete height, I use this technique:
.data_row:after {
content:" ";
display:block;
clear:both;
}
You can see more about this here and your demo here
Add overflow: hidden (or anything different than visible) to elements which contain floating elements.
Demo