I have a horizontal flex box with 3 columns. The black column (1/3rd on the left) is an image, the white column (1/3rd center) is text and the blue column (1/3rd right) is text.
The issue is that the text columns are by themselves just as high as the black stripe overlaying the white/blue boxes. The problem that happens is, that my image (black col on the left) stretches the text columns to become as big as itself.
I assume the image automatically wants to preserve the aspect ratio and this affects the overall height of the flexbox.
My goal is: I would like to keep the flexbox as high as the largest text column, but the image column should not grow the flexbox taller. In Tailwind, I've added object-cover and object-center on the image (the idea is that the image fills the gray stripe on the black box, covering it). Basically, the image should have the dimensions of the gray box via object-fit.
I've tried setting the image height to max-content and playing around with all kinds of height values, but I haven't found a decent solution yet. Can anyone help?
<div class="flex items-center h-full">
<div class="w-1/3 black">
<img class="max-h-max object-cover object-center" />
</div>
<div class="w-1/3 white">
<p>Short Text</p>
</div>
<div class="w-1/3 blue">
<p>Short Text</p>
</div>
</div>
Removing the items-center class makes flex items the same height. To prevent img from changing the left column's height its position should be absolute. To define the position of img the parent tag should be relative. Two classes of translate-x-1/2 and right-1/2 are added to bring the img center.
<script src="https://cdn.tailwindcss.com/"></script>
<div class="flex">
<div class="w-1/3 bg-stone-200 relative">
<img class="absolute translate-x-1/2 right-1/2 h-full" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png" />
</div>
<div class="w-1/3 bg-stone-50">
<p>Short Text</p>
</div>
<div class="w-1/3 bg-blue-900">
<p>Short Text</p>
</div>
</div>
Related
This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container
I am trying to format some divs using flex box. However, justify content or align items properties are not working and I can't figure out why. In 2 flex column divs, I have tried to use the mentioned properties but they have had no effect. I have put the code below. I am using tailwind and react.
The HTML is basically displaying one div whose width is the screen size. Inside the div, there are two divs. The first is an absolute div that is just there to provide a special background to the left half of the parent div. The second div is in the foreground and has some padding on the sides so it is in line with the page style. It has two divs in it that occupy the left and right half. I want to apply flex properties to the child divs here.
{/* container */}
<div className="w-screen relative mb-10">
// background div that provides a colour background to only the left half of the parent div
<div
id="backgroundShape"
className="w-1/2 bg-grey-400 absolute h-full -z-20"
></div>
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>
</div>
The id="backgroundShape" uses a clip-path property to give the background a special shape. I think it is irrelevant to my issue but I have included the style.
#backgroundShape {
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0 100%, 0 0);
}
If I can clarify anything please do comment. Would appreciate any help with this, thanks!
the items-center and justify-center because you didn't add the flex class to the child divs, the only change you need to do is this:
// div that holds the actual text and image content for the foreground
<div className="mx-auto container px-6 xl:px-28 flex py-10">
// left half of content, this gets displayed over the background div
<div className="w-1/2 flex flex-col justify-center pr-20 ">
<div>
Heading 1
</div>
<div className="text-4xl">
Heading 2
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-x-6 gap-y-3">
<div>
<FaScroll className="" />
<h3 className="text-lg">
Subheader
</h3>
<p className="text-sm">
Description
</p>
</div>
</div>
</div>
// right half of content displaying two images in a column
<div className="w-1/2 flex flex-col pl-10 justify-center">
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
<div>
<img
src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="image"
/>
</div>
</div>
</div>
I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.
I'm trying to center this burger. I used "grid place-items-center" so it gets centered and "h-screen" in order to let it be centered in the full height.
The problem is that it's not in the center, obviously because of the logo at the top.
how do i ignore this logo and center it anyways?
The navbar i'm coding
Greetings, PixelPage
You are almost there. The only thing you need to do is add a w-full to the parent div of logo (the one with the absolute class).
<div class="fixed left-0 h-screen bg-gradient-to-t from-[#07C8F9] to-[#6D8AE4] w-24">
<div class="w-full absolute grid place-items-center mt-8">
<img src="/assets/branding/logo-white.png" class="w-12 h-12"></img>
</div>
<div class="grid place-items-center h-full">
<img src="/assets/common/Burger.png" class="w-16 h-16"></img>
</div>
</div>
Hope this helps.
Read through this guide, it is invaluable, and I reference it all the time. It should help you figure out how to use grid to place your items: https://css-tricks.com/snippets/css/complete-guide-grid/
Using ZURB Foundation XY-Grid, I want to vertically center a cell's content, while still being able to have the cells fill the total height of the grid (for each cell to have it's own background image), which doesn't allow using the class ".align-middle" on the parent grid, since the cell height is then collapsed.
I want to be able to do this with a solid solution that will work on many different types of content, where you don't know the name and the height of the grid, so I am not looking for some specific hacks.
I have tried making the cell a flex-container, by adding the class ".flex-container", this allows me to add a class to vertically align the content, but I am hesitant to move away from the intended use of XY-grid, since it may create some other challenges that I am not forseeing now.
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
</div>
</div>
The code above renders the cells correctly but with the text at the top of the cell.
You'll need another grid-x and an align-middle on the containers that have the background. The div inside those will be centered. Like so:
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 grid-x align-middle" style="background:green;">
<div>This is the text I want vertically center</div>
</div>
<div class="cell small-6 grid-x align-middle" style="background:red;">
<div>This is the text I want vertically center</div>
</div>
</div>
</div>