Grid Property Similar to Flex-Grow [duplicate] - css

This question already has an answer here:
Does CSS Grid have a flex-grow function?
(1 answer)
Closed 3 years ago.
I discovered a bug with Chrome version 75's implementation of flexbox. Hence I wanted to see if the issue persists with grid, but the test will only work if there is a grid property that is similar to flex-grow due to the current structure of my document.
body {
display: flex;
flex-direction: column;
}
header {
/* height is implicitly determined by font-size and padding */
}
main {
flex: 1;
scrollbar-width: none;
overflow-y: auto;
}
::-webkit-scrollbar {
display: none;
-ms-overflow-style: none;
}
footer {
/* height is implicitly determined by font-size and padding */
}
Is there a similar grid property?

You can rely on 1fr to fill the remaining space:
body {
display: grid;
grid-template-rows: auto 1fr auto;
margin: 0;
height: 100vh;
}
header {
padding: 15px;
font-size: 1rem;
background: red;
}
main {
background: green;
overflow:auto;
padding:10px;
}
footer {
padding: 15px;
font-size: 1rem;
background: blue;
}
<header>this is a header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.
Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa
</main>
<footer>this is a footer</footer>

Related

CSS: When flex row wraps, how to keep scrollable column from being pushed down below its container's fold?

In a fixed-height container, I have a flexbox (.main) with flex-direction: row and flex-wrap: wrap. At a wide screen size, I'd like its children — an image (.image-column), and a long amount of text (.text-column) — to be columns, in which the image remains static and the text scrolls. So far, so good. When sized down past the columns' min widths, I'd like them to wrap and stack. This all works, but here's the problem: when they wrap and stack, the scrollable text is offset by the min-height of the .image-column above it, such that when you scroll down to the bottom of the text, the scrollbar disappears offscreen rather than remaining within its container. But if you adjust the height to account for this offset, the .text-column is squished in the unwrapped state.
The two conflicting elements seem to be:
.image-column's min-height: 200px — but without this, the image doesn't show up at all when wrapped
.text-column's height: 100% — but without this, the text doesn't scroll
I've tried .text-column with height: calc(100% - 200px) — this fixes the offset when stacked, but creates unnecessary whitespace when in columns, and I'd prefer to avoid such specificity anyway
I'd like to figure out a solution with CSS only and no media queries, since this container may be in a multi-column layout with other containers. I'm willing to use flex, grid, float, or any other arcane layout trick.
Has anyone else experienced this issue with flex row wrapping and scrolling?
(You can run the code snippet below to see the layout wrapped, and press Full Page to see the layout in its wide 2-column state.)
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
padding: 40px;
background: #f6f6f6;
font-family: sans-serif; font-size: 120%; line-height: 1.5; color: #111;
}
.container {
height: 600px;
min-width: 300px;
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 10px;
overflow: hidden; /* don't scroll */
border: 1px solid #ccc;
}
.header {
border-bottom: 1px solid #ccc;
padding: 20px;
}
.main {
flex: 1 1 auto; /* fills remainder of height */
display: flex;
flex-direction: row;
flex-wrap: wrap; /* wrap after elements reach min-width / flex-basis */
overflow: hidden; /* don't scroll */
}
.image-column {
min-height: 200px;
flex: 1 1 300px; /* column width, min for wrapping */
background-image: url('https://images.unsplash.com/photo-1641361784653-73767ccfdf60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDM0fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-column {
height: 100%;
flex: 2 1 420px; /* column width, min for wrapping */
overflow: auto; /* scroll */
padding: 20px;
}
.footer {
border-top: 1px solid #ccc;
padding: 20px;
}
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="image-column"></div>
<div class="text-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros.</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
I've found a solution to my own question.
Grid has a similar way of wrapping columns, using repeat's auto-fit with a minmax for each column in which the min is a fixed width.
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
overflow: hidden; /* don't scroll */
}
Using this approach, when the columns wrap, the first column's min-height no longer offsets the second column and its scrollbar out of the container, as it did with flex row wrap.
The only small drawback is that the grid's two columns must be of equal width in order for the wrapping to work. For my uses, this is acceptable.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
padding: 40px;
background: #f6f6f6;
font-family: sans-serif; font-size: 120%; line-height: 1.5; color: #111;
}
.container {
height: 600px;
min-width: 300px;
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 10px;
overflow: hidden; /* don't scroll */
border: 1px solid #ccc;
}
.header {
border-bottom: 1px solid #ccc;
padding: 20px;
}
.main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
overflow: hidden; /* don't scroll */
}
.image-column {
min-height: 200px;
background-image: url('https://images.unsplash.com/photo-1641361784653-73767ccfdf60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDM0fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-column {
overflow: auto; /* scroll */
padding: 20px;
}
.footer {
border-top: 1px solid #ccc;
padding: 20px;
}
<div class="container">
<div class="header">Header</div>
<div class="main">
<div class="image-column"></div>
<div class="text-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius enim eu justo posuere, a laoreet urna sodales. Mauris ac porta lorem, id malesuada ipsum. In ac ipsum sapien. Nunc nisi tellus, auctor vitae placerat sit amet, posuere id velit. In semper ex placerat purus sollicitudin, at aliquet metus viverra. Nam malesuada vel tellus malesuada fermentum. Curabitur iaculis vel lacus nec scelerisque. Praesent feugiat ac augue bibendum facilisis. Curabitur dapibus malesuada magna sit amet vehicula. Fusce ipsum eros, consectetur in sodales ac, lacinia at purus. Quisque laoreet justo et semper luctus. Nam ligula orci, ultricies et enim non, elementum rutrum massa. Aenean cursus lacus in magna hendrerit, in fermentum ex porttitor. Integer elementum, enim sit amet vehicula mollis, diam tortor congue massa, eget accumsan nulla arcu a leo. Maecenas convallis placerat magna, vitae lacinia mi ullamcorper quis. Etiam congue aliquet dolor eget dignissim. Donec malesuada laoreet nibh, sit amet tristique lacus facilisis nec. Quisque sit amet enim ac lectus bibendum laoreet. Pellentesque eleifend urna eget ultricies commodo. Nulla ex sapien, accumsan sit amet est vitae, pretium sollicitudin metus. Nullam finibus, ipsum id tincidunt tristique, diam tortor pellentesque orci, non rutrum turpis arcu ultricies eros.</p>
</div>
</div>
<div class="footer">Footer</div>
</div>
(You can run the code snippet below to see the layout wrapped, and press Full Page to see the layout in its wide 2-column state.)
try setting the height of .text-column to 260px
.text-column {
height: 260px;
flex: 2 1 420px; /* column width, min for wrapping */
overflow: auto; /* don't scroll */
}

Rotate text button in flex?

I would be grateful for advice about how to rotate a button in a flex context. I have a flex container with a "row" direction (that is, the three content items are arranged from left to right in a row), and the leftmost content item is a <div> that contains just a <button> with a few words of text in it. I want that <div> to be rendered vertically (so that the text reads from bottom to top), to hug the left edge of the container, and to be just the width of its one line of text.
The sample at https://jsfiddle.net/djbpitt/gth3nck9/74/ works as I need it to in Firefox 89, but in Chrome 90 (and Safari 14.1.1) the button is not rotated. caniuse.com tells me that vendor prefixes should not be required for CSS transform: rotate() or writing-mode: vertical-lr;, and adding a -webkit prefix doesn't seem to help anyway.
I would be grateful if someone could please advise me about how I can obtain the behavior I need in the versions of Firefox, Chrome, and Safari mentioned above (which are the latest versions as I write this). I would prefer a pure HTML/CSS (that is, no JavaScript) solution. Thank you!
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<div id="button">
<button><span>Rotate me!</span></button>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor. Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
</body>
</html>
The problem seems to lie with Chrome/Edge settings for button. They have for example amongst other things:
-webkit-writing-mode: horizontal-tb !important;
So this snippet gives up trying to style a button and replaces it with a div. Obviously you'll want to style that as you wish:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body>* {
overflow-y: auto;
height: 100vh;
}
div#button {
position: relative;
display: flex;
flex: 0 0 1em;
writing-mode: vertical-lr;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
#button div {
background-color: #eeeeee;
padding: 10px 5px 10px 5px;
border: 1px solid black;
border-radius: 5px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
<div id="button">
<div>Rotate me!</div>
</div>
<nav>
<ul>
<li>first</li>
<li>section</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim tristique est, et facilisis urna aliquet et. Vivamus porta laoreet mi non cursus. Integer volutpat tortor lectus, interdum gravida libero interdum ac. Curabitur malesuada cursus
laoreet. Donec nec varius est, ac venenatis velit. Vivamus ac ipsum et nibh dictum dignissim. Fusce eget turpis in sem rutrum congue. Donec vitae sollicitudin nunc, elementum porta tortor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque convallis quam leo, pretium fermentum ante imperdiet sit amet. Quisque egestas risus vitae ante fermentum tincidunt. Sed consectetur efficitur tempus. Nunc tincidunt nunc sed semper accumsan. Ut eu tortor
scelerisque, aliquet leo eget, ullamcorper dolor.</p>
<p>Duis non nisi vitae felis ultricies dapibus pulvinar quis ex. Nullam imperdiet, risus sed pharetra aliquam, mi nulla condimentum purus, tincidunt hendrerit ex metus vitae nisl. Nullam venenatis turpis libero, a bibendum elit venenatis ut. Aenean et
orci ac metus pretium pellentesque. Phasellus sed faucibus est. Aenean a dui non augue aliquet sagittis quis at ex. Vestibulum lorem lectus, sodales efficitur lacinia id, iaculis id ante. Fusce aliquam erat libero, a ultrices dolor volutpat et. Vivamus
at euismod nisl. Donec hendrerit non lacus vel mollis.</p>
<p>Phasellus gravida non nisi quis vehicula. Curabitur sagittis nec nulla eget sollicitudin. Mauris sit amet mattis ligula. Nulla pretium posuere diam vitae tempor. Aenean consequat ligula luctus quam vestibulum, vel rhoncus turpis laoreet. Etiam nec aliquam
ipsum, ut tristique lorem. In nec auctor arcu. Proin sed finibus ligula. Sed scelerisque lorem ligula. Nam quis quam vehicula, hendrerit nibh nec, rhoncus elit. Praesent porttitor, tellus nec aliquam sollicitudin, justo orci sagittis nisl, non imperdiet
ligula mauris sit amet eros. In dignissim placerat laoreet. Aenean ipsum lorem, aliquet id arcu id, rhoncus porta justo. Integer egestas mauris quam, eget placerat metus sagittis eget. Aenean volutpat eleifend nisi eget interdum.</p>
<p>
Vestibulum in ante lectus. Mauris luctus imperdiet facilisis. Nunc sagittis velit lacus, eget gravida arcu efficitur vitae. Sed sodales felis elit, eget volutpat dui congue sit amet. Fusce mi velit, cursus volutpat dapibus in, auctor id dolor. Maecenas
convallis nisl justo. Cras sollicitudin tellus nec dui dictum finibus. Fusce nec feugiat metus. Aliquam sit amet congue nulla. Sed cursus fringilla sapien et malesuada. Duis aliquet, nunc eget consectetur fringilla, felis lectus ultrices mi, id maximus
justo mauris a mi.</p>
<p>
Vivamus ac est vitae nulla dignissim posuere ac id arcu. Duis sed tortor pretium, tempus orci vel, efficitur ex. Quisque aliquet enim mattis odio tincidunt lacinia. Vestibulum blandit congue neque ac bibendum. Proin at consequat tortor, id malesuada dolor.
Integer interdum purus sit amet leo venenatis, gravida porttitor ipsum eleifend. Donec venenatis maximus faucibus. Duis et magna vitae arcu malesuada sodales.</p>
</main>
OP here. Thank you, A Haworth, for the pointer to the !important user agent setting for writing-mode in Webkit. I knew that browsers had default styling, of course, but I didn't realize that some of that styling apparently could not be overridden with user specifications.
Your insight led me to give up on changing the writing-mode value for the <button>, as you suggest, and I approached the task by wrapping a <span> around the text inside my <button> and specifying the writing-mode for the <span>. The new version is at https://jsfiddle.net/djbpitt/gth3nck9/86/. HTML and CSS are copied below:
<div id="button">
<button>
<span>Rotate me!</span>
</button>
</div>
I had to do some additional fiddling with the CSS to get the rendering I wanted:
html {
height: 100%;
}
body {
display: flex;
flex-direction: row;
height: 100%;
margin-left: 0;
padding-left: 0;
}
body > * {
overflow-y: auto;
height: 100vh;
}
body > section {
flex: auto;
}
div#button {
display: flex;
flex: 0 0 1em;
border: none;
justify-content: center;
transform: rotate(180deg);
margin: 0 5px 0 0;
padding: 0;
overflow: visible;
}
button {
margin: auto;
border: 1px black solid;
border-radius: 10px 0 0 10px;
padding: 3px;
}
button > span {
writing-mode: vertical-lr;
width: 1em;
margin: 3px;
}
nav {
flex: 0 0 20em;
margin-right: 1em;
padding-right: 1em;
border-right: 1px gray solid;
}
nav ul {
list-style-type: none;
padding-left: 0;
}

How to make navbar dropdowns not expand the navbar in pure CSS

I have a navbar and it contains dropdowns. When expanded I want the dropdown to sit on top of the content below the navbar. Instead, it expands the whole navbar so that it contains the dropbox, and pushes all the content down. I am after a pure CSS solution, I don't use CSS frameworks.
I am using flex blocks in my code and I want to know the correct and simplest way to get the effect I want.
The code below is as simple as I can make it, but bear in mind that I will be making the navbar responsive on my actual web page.
The dropdown is in the div with class="dropdown".
CSS
.navbar {
display: flex;
justify-content: space-between;
background-color: white;
width: 100%;
}
.dropdown {
color: black;
}
.dropdown-list {
display: none;
}
.dropdown-item {
color: blue;
}
.dropdown:hover .dropdown-list {
display: flex;
flex-direction: column;
}
HTML
<div class="navbar">
<div class="dropdown">Menu
<div class="dropdown-list">
<div class="dropdown-item">AA</div>
<div class="dropdown-item">BBBBB</div>
<div class="dropdown-item">CCC</div>
</div>
</div>
<div>DDD</div>
<div>EEEEE</div>
</div>
You can view the code in action here, click [Menu] on the left to see the dropdown. Rather than expanding the navbar I want it to sit on top of the content: Codepen
You can do that by making the dropdown's position property as absolute and making its parent container relative.
.dropdown {
color: black;
position:relative;
}
.dropdown-list {
display: none;
background:#f4f4f4;
position:absolute;
top:10px;
left:10px;
padding:5px;
text-align:center;
}
Whole code:
.navbar {
display: flex;
justify-content: space-between;
background-color: lightgray;
width: 100%;
}
.dropdown {
color: black;
position:relative;
}
.dropdown-list {
display: none;
background:#f4f4f4;
position:absolute;
top:18px;
left:10px;
padding:5px;
text-align:center;
}
.dropdown-item {
color: blue;
}
.dropdown:hover .dropdown-list {
display: flex;
flex-direction: column;
}
<div class="navbar">
<div class="dropdown">Menu
<div class="dropdown-list">
<div class="dropdown-item">AA</div>
<div class="dropdown-item">BBBBB</div>
<div class="dropdown-item">CCC</div>
</div>
</div>
<div>DDD</div>
<div>EEEEE</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies dapibus nibh sit amet vestibulum. Nam consequat, erat eu lobortis ornare, turpis dui finibus ligula, quis vulputate mauris nunc vel mauris. In et justo id nisi egestas scelerisque. Sed blandit, risus vitae condimentum varius, lacus tortor congue dolor, et tristique urna arcu eu eros. Quisque consequat, augue vitae tincidunt porttitor, risus eros posuere nulla, sed euismod ante est sit amet orci. Cras mattis at nibh vel lobortis. Fusce feugiat iaculis mattis.
Sed condimentum, neque quis consectetur venenatis, augue dolor tincidunt odio, vel dapibus leo orci ac metus. Aliquam ut commodo lectus, sagittis fermentum lorem. Suspendisse euismod sollicitudin turpis, ac imperdiet elit imperdiet vitae. Quisque imperdiet cursus velit. Etiam leo ligula, iaculis nec sollicitudin in, venenatis nec tellus. Duis ut quam fermentum, iaculis nisl eu, aliquet nunc. Proin maximus diam lorem, et molestie tortor porttitor sodales. Nam at urna tempus, ultricies sapien id, semper augue. Donec in felis ante. Mauris eu dignissim est.
Donec ullamcorper sollicitudin tortor. Nam tortor tortor, cursus nec lacus non, convallis gravida sapien. Donec ac libero sollicitudin, varius tortor vel, blandit nibh. Quisque ligula erat, lobortis sit amet urna ut, efficitur blandit turpis. Nam tempus fringilla odio, eleifend feugiat libero fermentum eget. Suspendisse non tempor lectus. Sed vel fermentum sapien. Vivamus non lorem arcu. In egestas feugiat eros ut suscipit. Ut sit amet lorem ut erat ornare blandit sed a felis. Nulla facilisi. In ullamcorper accumsan facilisis. Suspendisse potenti. Morbi gravida tristique sollicitudin. Quisque et iaculis nibh. Maecenas tempus ex ac mi convallis suscipit.
Nam varius elit eget mauris interdum tempus. Cras nec sodales felis. Suspendisse elit magna, auctor id suscipit non, fringilla id lacus. Nullam mattis justo arcu, at consequat eros pulvinar id. Morbi varius, elit elementum ornare condimentum, risus tellus sollicitudin ex, nec mattis risus diam quis nibh. In nec efficitur ipsum. Ut ac sapien id libero dapibus faucibus.
Suspendisse tempor mauris sem, pulvinar finibus magna lacinia id. Proin vel risus quis nisl volutpat gravida ut interdum tellus. Nulla laoreet scelerisque ipsum, eget elementum augue dignissim vel. Morbi pretium felis non urna maximus, nec pellentesque ante dignissim. In at efficitur diam, pulvinar aliquam justo. Aenean in erat tellus. Duis sem mauris, placerat nec ullamcorper sed, posuere tincidunt purus. Proin eleifend ipsum est, sed volutpat quam mattis vitae. Integer vitae ultricies felis.
here you are,
use this piece of code
.navbar {
display: flex;
justify-content: space-between;
background-color: lightgray;
width: 100%;
position:fixed;
top:0;
left:0;
right:0;
}
You can use this code to get Drop Down out:
.dropdown-list {
display: none;
background:#f00;
padding:10px;
position:fixed;
top:20;
left:0;
right:0;
}
top attribute must be header size or greater

Overflow not working in grid columns despite setting min width and height [duplicate]

This question already has answers here:
Applying an ellipsis to multiline text [duplicate]
(23 answers)
Closed 3 years ago.
Despite following the instructions from here as referenced by many, I cannot get text to get truncated by an ellipsis in a grid.
Here's my html:
<div class=grid>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
<span>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</span>
</div>
And my css:
.grid {
display: grid;
grid-template-rows: 70px 70px;
grid-template-columns: 100%;
margin: 12px;
}
span {
border: 1px solid blue;
overflow: hidden;
text-overflow: ellipsis;
margin: 6px;
}
.grid, span {
min-width: 0;
min-height: 0;
}
And as you can see in this fiddle, the ellipsis is not showing. Would love to get some help on this.
You forgot to add a white-space: nowrap
span {
white-space: nowrap; <<
border: 1px solid blue;
overflow: hidden;
text-overflow: ellipsis;
margin: 6px;
}

Image-alignment error in Wordpress

I'm developing a theme for Wordpress.
As usual, there are the main page (index.php or home.php) with post summary and single.php file to display a certain post.
On the main page, the image alignment works as follow:
When I resize the page...
Inside single.php, it shows so:
I'm using this stylesheet:
/* Images */
.alignright {
float:right;
margin: 0 0 10px 20px;
}
.alignleft {
float:left;
margin: 0 20px 10px 0;
}
.aligncenter {
display: block;
margin: 0 auto 1px auto;
clear: both;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 12px;
font-style: italic;
line-height: 20px;
padding: 0 5px;
margin: 5px 0;
}
How can I fix these problems?
Best regards, Vi.
Note: code of post body is:
<article class="post-9 post type-post status-publish format-standard hentry category-uncategorized tag-ipsum tag-lorem tag-smashing tag-sticky" id="post-9">
<!-- Display the Post's content in a div box. -->
<div class="entry">
<div id="attachment_10" class="wp-caption alignright" style="width: 253px"><img class="size-medium wp-image-10" alt="Smashing Pumpkins" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/SP-Poster-243x300.jpg" width="243" height="300" /><p class="wp-caption-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc.</p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et sapien metus. Nulla a sollicitudin nunc. <ins datetime="2012-12-19T17:23:48+00:00">Donec diam sem, porta id facilisis sit amet</ins>, auctor et justo. Mauris sapien urna, imperdiet imperdiet pharetra in, tempus id augue. Sed vitae leo purus. Donec consectetur porta leo vitae luctus. Sed sed mollis nulla.</p>
<p>Praesent venenatis gravida pellentesque. Pellentesque sit amet orci sem, vitae gravida massa. Maecenas suscipit volutpat felis. Proin placerat est at ipsum fermentum vulputate.</p>
<p>In ac erat lacus, ac congue urna. Nunc egestas luctus orci, ut elementum neque gravida vel. Vivamus blandit nunc vitae mauris convallis ac euismod felis ultricies. Phasellus ac ligula lorem, in adipiscing velit. Aliquam auctor ultricies est, vitae condimentum tellus consequat eget.</p>
<div id="attachment_34" class="wp-caption alignleft" style="width: 250px"><img class="size-medium wp-image-34 " alt="Benuimaru" src="http://localhost/~vdenotaris/wordpress/wp-content/uploads/2012/12/Benimaru-Nikaido-240x300.jpg" width="240" height="300" /><p class="wp-caption-text">Benimaru Nikaido</p></div>
<p>Nulla tempor, ante pulvinar vehicula faucibus, turpis mi pellentesque est, eget egestas lectus nulla vel nisl. Curabitur in turpis id eros ultrices gravida. Nam vel mauris in nibh blandit facilisis et ut dui. Donec in dignissim diam. Maecenas aliquam porttitor sapien, at tempus mauris tincidunt ut. Donec ut lectus id ante fermentum pretium. Curabitur auctor orci eu magna ultrices auctor. Etiam placerat, magna nec ultricies convallis, elit turpis mattis felis, ut dapibus lorem orci in enim. Fusce ipsum felis, commodo et posuere quis, commodo ut lacus. Pellentesque tristique augue varius arcu blandit mollis. Donec aliquam purus vitae augue vehicula placerat. Aenean libero nulla, rutrum in volutpat id, viverra id nunc.</p>
<ul>
<li>Quisque auctor consequat sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nullam luctus placerat lorem ornare volutpat. Integer <code>euismod magna</code> a neque fringilla eget mollis orci tristique.</li>
</ul>
<pre>Etiam sagittis augue vitae nunc imperdiet ut vehicula diam condimentum. Etiam non massa libero. Nam eget mi felis, nec dapibus neque. Cras viverra eleifend cursus. Aliquam sagittis auctor accumsan. Vivamus tincidunt, metus a varius condimentum, nisl erat commodo libero, et faucibus urna dolor eget nisi. Cras mi lectus, dictum sed volutpat eu, laoreet non mi. Aliquam dolor odio, malesuada sed volutpat et, facilisis sit amet eros.</pre>
<p>Aenean hendrerit feugiat leo, eget sollicitudin mauris pretium non. Suspendisse potenti. Quisque eget nunc magna. Proin lectus dolor, consequat et vulputate id, vehicula id velit. Cras at elit id turpis luctus pretium sed eu ante.<del> Nunc rutrum pulvinar dapibus. Mauris nisl mauris, porttitor in pulvinar nec, auctor ac felis.</del> Aliquam malesuada purus sed augue condimentum et lacinia turpis porttitor. Donec tempor aliquet ligula, elementum facilisis est congue eget.</p>
<blockquote><p>Nullam dapibus aliquet sem, vel mollis elit sagittis vel. Etiam quis leo ante, ut ultricies orci.</p></blockquote>
<p>Mauris eget ipsum orci, et euismod tortor. Integer gravida justo nisl, in dictum eros. Maecenas<strong> venenatis erat eu tortor consequat porttitor eu et lectus</strong>. Maecenas volutpat nibh quis nisl tempor quis faucibus enim rhoncus. Vestibulum placerat, dolor in faucibus lacinia, augue odio rhoncus justo, sed facilisis lectus nulla eget tortor. Donec vitae purus nulla. Quisque ut tellus quis turpis fermentum bibendum. <a title="Sample" href="http://sample">Mauris ullamcorper, massa in suscipit luctus, metus dui auctor est, et mattis dolor tortor quis elit.</a> Nulla felis massa, auctor vel adipiscing malesuada, tempor a velit. Sed tincidunt congue turpis eget pharetra.</p>
</div>
</article>
You may be able to force it by adding a clear:left to the .wp-caption classes that also have .alignright and visa versa. Having a URL to your site would be helpful to get you something more specific.
Update: You're using a responsive layout, so things will change depending on the browser, but basically it looks like you aren't happy with the way the first image on single.php floats so that it cuts the second paragraph to one word in the first line. There isn't much you can do about that, though, without making writing posts a PITA later on. Your homepage and your single.php are displaying slightly differently, the first paragraph on the homepage is much longer - by about 1-2 lines- than on single.php so that's why the first image floating to the right is behaving differently. As for the unordered lists, this is a typical pain with WordPress image alignment unfortunately, see it all the time. Easiest way to deal with it is to try to structure your posts such that the images don't end up alongside a list or, barring that, set your UL so that it forces a new line using 'clear' and 'display' properties.
The only solution that I've found is the follow:
article .entry ul {
margin: 10px 0 10px 2px;
}
article .entry ul > li {
margin: 5px 0;
list-style-position: inside;
}
/* Images */
.alignright {
display: inline;
float: right;
margin: 0 0 10px 20px;
}
.alignleft {
display: inline;
float: left;
margin: 0 20px 10px 0;
}
.aligncenter {
display: block;
margin: 0 auto 1px auto;
clear: both;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 12px;
font-style: italic;
line-height: 20px;
padding: 0 5px;
margin: 5px 0;
}
And there is the result:
That isn't the best technique there can possibly be, but the result may be considered acceptable (I think).

Resources