I'm stuck on a cssproblem.
I have a div with fixed height, 400px and inside that div there is some variable text. And an image, I need the image to fill the space of the div. The text will change so the space always is different and all must be inside the height bounds.
I found a solution, using display: flex and setting image on background of a div.
You can see code here: https://jsfiddle.net/ckryvuzm/
I tried using display: table but the fixed height of 400px grows when content changes.
Define the Width of the div to 100% that contains the height of 400px and display: flex and flex-direction: column.
Inside it make Image div to the flex-grow: 1.
And put all of your content inside one div, and make overflow: auto, as there will be less content it will not have scroll and if the content grows in size the content will get a scroll-bar.
Here made a fiddle which I think exactly solve your Issue: https://jsfiddle.net/ABhimsaria/vj7bgzpb/2/
#container {
position: relative;
font-size: 20px;
height: 400px;
width:100%;
border:1px solid black;
height: 400px;
display: flex;
flex-flow: column;
}
Related
demo: https://codesandbox.io/s/confident-bash-55v3z
I was following along some tutorial and I encountered this problem. the code is simple
I have flex container called images
<div class='images'>
<img src='imgs/787.jpg' class="main" />
<img src='imgs/sub1.jpg' class="sub1" />
<img src='imgs/sub2.jpg' class="sub2" />
</div>
and for the stylesheet I have
.images {
width: 234px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid red;
}
.images > * {
padding: 1px;
height: 111px; <--- this seems like a magic number to me
}
img.main {
flex-basis: 99%;
}
img.sub1,
img.sub2 {
flex-basis: 49%;
}
the intended look is like this
However when I commented out the height: 111px;line, the layout is off
I am new to flexbox and css in general and I know that flex-basis is soft of like min-width. Without the height being 111px, the image will grow to occupy more space than its min-width(or flex-basis).
So my question is, to achieve the correct layout we want, how did the original author of the style sheet know that the height needs to be 111px? Can we achieve this layout using 'max-width' or other techniques which would make more sense to me?
First, about the magic number.
You have a container that is 234px wide, and two smaller images that have natural dimensions of 150px by 150px. Their combined width is 300px, which is larger than the container width, so they don't fit in the same row.
We can fix this by making them smaller. But how small do they need to be? There's a 1px padding around each image, for two images that's 4 pixels. We need to subtract that from the container width. Which leaves 234 - 4 = 230 pixels for two images, or 230 / 2 = 115 pixels for each image.
In your example the size of images is controlled using height and flex-basis. Using both at the same time can lead to distorted proportions. This actually happens to the top image in your 'intended look' example. If you compare it to the original image you can see that it's squashed vertically.
Also the interaction of height and flex-basis is quite unintuitive. To achieve the desired layout we don't actually need both, so let's put flex-basis aside.
When you set height of the image without setting its width, the image will automatically scale proportionally. Since our images are square, by setting the height to 111px we implicitly set the width to 111px as well. And since 111 is less than 115 both images fit in the same row. There's nothing magic about the number 111, any number below 115 will work.
We can simplify the code a little:
.images {
width: 234px;
display: flex;
flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
border: 1px solid red;
}
.images > * {
align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
box-sizing: border-box; /* include padding into the image width */
padding: 1px;
}
img.main {
width: 100%; /* occupy entire row */
}
img.sub1,
img.sub2 {
width: 50%; /* occupy half of the row */
}
Demo: https://codesandbox.io/embed/focused-faraday-bsd88
Try changing the width of the container to 500px or 100px. The images will scale automatically and will keep their proportions.
Instead of flex-basis, try adding width. This will keep 2 images in one line. flex-basis on the other hand, is for initial image size.
img.sub1, img.sub2 {
width: 50%;
padding: 0;
}
You are not setting any width or height to your images, so by default they take their true dimensions. In this case your "sub" images are wider than the width you define to your container, thus, by flex-flow: row wrap; the images can't be on the same line. you should set 50% width to your sub images, or set a bigger width to the container.
I fixed it here
Let's say I have a <div> with a minimum width and a fixed height. If the contents of the <div> gets long, it begins to expand the width to accommodate. However, it will expand the width even if that fixed height leaves plenty of room for more lines of text without making the <div> wider.
Is there a way to make the contents try to spill into the available height first before expanding the width of the <div>?
<div class="container">
Text
</div>
.container {
display: inline-block;
height: 3.6em;
min-width: 150px;
}
Going off the assumption that you are not using a front end framework ie: Bootstrap.
I offer the following solution by adding the max-width attribute.
.container {
display: inline-block;
height: 3.6em;
max-width: 400px;
min-width: 150px;
}
Let's say I have a div with a fluid width (for example, min-width 200px and max-width 1000px). We'll call this div Div1. I want to wrap this div in a parent div and I want this parent div to shrink to fit Div1 without affecting Div1's width at all.
From what I've read, the way to get a parent to fit its contents is to set the parent's display to inline-block. However, whenever I do this it seems to force the contents to shrink to their min-width. Here's an example on codepen - I have two divs with the exact same properties but one of them is forced to its min width because it is has a parent container with display: inline-block.
http://codepen.io/ahung89/pen/LGqrwz
Code below (HTML on top CSS on bottom)
<div class="container">
<div class="div-with-min-width">
This div is forced to its minimum width.
</div>
</div>
<div class="div-with-min-width">
This div is not forced to its minimum width.
</div>
.div-with-min-width {
border: 1px red solid;
background: red;
color: yellow;
min-height: 100px;
min-width: 200px;
max-width: 1000px;
}
.container {
border: 4px green solid;
display: inline-block;
}
How do I make the parent wrap to the child's width without actually changing the child's width?
Add float: left; or float: right; or overflow: hidden; to collapse the parent element.
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
I have a page with the following structure:
div.wrapper > div.content > div.item + div.item
The wrapper has a width of 320px, whereas the two div.item come out to around 600px. I need those two to be displayed inline (right now they are display: inline-block;, and have the wrapper's contents scroll horizontally. When I set the div.content width to auto, it takes the width of the wrapper (320px). Setting the width to 200% obviously gets the horizontal scrolling to work, but how do I get div.content to take on the width of its contents to allow for horizontal scrolling?
Note: The wrapper is set to a fixed width and height and has overflow-y: hidden and overflow-x: scroll set, because I do not want vertical scrolling-- only horizontal.
JSFiddle with an example:
http://jsfiddle.net/kh5k7/
As you can see, the red divs will vertically stack. Changing the .content width to 200% (or some value) will cause horizontal scrolling to occur properly. I want this done automatically though, because I have no clue how many elements are going to be in the .content div before hand.
Use white-space:nowrap; on .content
.content{
width: auto;
white-space:nowrap;
}
http://jsfiddle.net/kh5k7/1/
You can have something like this:
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.content {
width: auto;
white-space: nowrap;
}
.item {
display: inline-block;
}