<body>
<div class="home">
<div class="title-header">
<div>HEADER</div>
</div>
<div class="main">
<div class="left-pane">
<div class="content">
<!-- SVG overflows the container on resize -->
<svg height="100%" width="100%" viewbox="0 0 200 200" preserveAspectRatio="xMidYMin meet">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<!-- Using a Div instead works great!
<div style="width: 100%; height: 100%; background-color: white">
</div> -->
</div>
</div>
<div id="rightpane" class="right-pane">
<button onClick="toggleSize()">Resize</button>
</div>
</div>
</div>
<div class="footer">
<div>FOOTER</div>
</div>
</body>
</html>
.home {
display: flex;
flex-direction: column;
width: 1000px;
height: 800px;
background-color: lightgray;
}
.title-header {
width: 100%;
display: flex;
flex: 0 0 35px;
height: 35px;
background-color: lightblue;
align-items: center;
justify-content: center;
}
.main {
display: flex;
width: 100%;
flex: 1;
background-color: lightgreen;
}
.left-pane {
display: flex;
flex: 1;
flex-direction: column;
background-color: white;
}
.right-pane {
flex: 0 0 350px;
width: 350px;
border-left: 1px solid lightgray;
&.min {
flex: 0 0 100px;
width: 100px;
}
}
.content {
width: 100%;
height: 100%;
background-color: yellow;
}
.footer {
display: flex;
position: absolute;
top: 810px;
left: 0px;
flex: 0 0 35px;
width: 1000px;
height: 35px;
border: 1px solid black;
align-items: center;
justify-items: center;
}
Example is here: https://codepen.io/johnny4111/pen/ZEYNqyq
I have a structure as in the example, it's a container that has a left and right pane. The right pane can be minimized programmatically. The Left pane has an SVG set to take up 100% height and 100% width. The left pane has flex-grow set to 1 so that it takes up 100% of the free height but should not exceed the bounds of it's parent div.
The expectation is when the right pane is minimized and the left pane expands it's width to take up the now available free space the SVG should still constrain itself to the available height (100% height) since the height has not changed, just the width. However, in reality it overflows the div. There is a absolute positioned footer at the bottom so you can see it overflows into that.
Any ideas what the problem is? If I use a regular div set to 100% width, 100% height instead of an SVG it works without any issues. The Div does not overflow it's parent.
Related
I have problem with change size while manipulating browser size. I need to keep one column on another so I use relative + absolute combination.
I'm wondering if there is an option with only CSS to make such element responsive.
<div class="clock">
<div id="apDiv3" class="opening">
<div class="clock">
<img id="apDiv2" class="clock" src="./assets/stoper-01.png" usemap="#image-map">
<img id="apDiv1" class="clockArrow" src="./assets/stoper-01-arrow.png">
<map name="image-map">
<area area settings>
...
</map>
</div>
</div>
</div>
div.clock {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
img.clock {
position: relative;
}
.clockArrow {
position: absolute;
}
You could try using the CSS calc() function like the given eg.
.top-img{
...
width: calc(var(--background-img-width) - var(--offset));
...
}
Here, add --background-ing-width to your :root and apply it in .background-img's width. Then you can add --offset in your :root and add to .top-img as shown and tweak these two variables to your liking.
I'm wondering if there is an option with only CSS to make such element responsive.
Here's a sample:
.wrapper{
height: 100vh;
margin: 0 30%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
min-width: max-content;
}
.circle{
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fc1.staticflickr.com%2F1%2F694%2F23104548209_fed5c6d1cd_b.jpg&f=1&nofb=1);
height: 50vh;
width: 50vh;
border-radius: 50%;
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 1.3vh;
}
.rec{
flex: 1;
height: 15vh;
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.cameraegg.org%2Fwp-content%2Fuploads%2F2012%2F09%2FSony-DSC-RX1-Sample-Image.jpg&f=1&nofb=1);
background-size: 100% 100%;
}
<div class="wrapper">
<div class="circle">
<div class="rec"></div>
</div>
</div>
You can make use of viewport height and width to make the elements responsive. More on units here.
I need to the container and the green div to grow as the same size as blue whenever things inside the blue div grow.
.container {
background: grey;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
.normal {
background: green;
}
.wide {
width: 2500px;
background: blue;
flex: 1 0 auto;
}
<div class="container">
<div class="normal">Normal</div>
<div class="wide">Wide</div>
</div>
CodePen
consider inline-flex instead
.container {
background: grey;
height: 200px;
flex-direction: column;
padding: 10px;
display: inline-flex;
min-width:100%; /*to make sure it behave like flex if the content is small*/
box-sizing:border-box;
}
.normal {
background: green;
}
.wide {
width: 2500px;
background: blue;
flex: 1 0 auto;
}
<div class="container">
<div class="normal">Normal</div>
<div class="wide">Wide</div>
</div>
Related: Why does the outer <div> here not completely surround the inner <div>?
I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image.
<div id="flex-container">
<div id="container1"></div>
<img src="#" alt="">
<div id="container2"></div>
</div>
#container1 and #container2 have their own height, and the img should use the remaining height inside #flex-container.
This snippet works on Firefox, but doesn't work in Chrome. (jsfiddle)
#flex-container{
height: 300px;
width: 500px;
display: flex;
display: -webkit-flex;
flex-flow: column nowrap;
-webkit-flex-flow: column nowrap;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
border: 5px solid black;
}
#container1, #container2{
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
Chrome needs -webkit- prefixes for flexbox, but the issue doesn't seem to be this.
What can be happening? Is a browser bug or I'm forgetting something?
There are two problems you need to overcome:
Firefox solves them both on its own, but Chrome needs assistance.
Problem #1
The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.
Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
A complete explanation of this issue can be found here:
Why doesn't flex item shrink past content size?
Problem #2
Then you hit the second problem: keeping the aspect ratio. This is a common problem in flex containers. One option is to define a height for the image:
#flex-container {
height: 300px;
width: 500px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
border: 5px solid black;
}
#container1, #container2 {
height: 100px;
width: 300px;
background: orange;
flex: 1 0 auto;
}
img { min-height: 0; height: 100px; } /* NEW */
<div id="flex-container">
<div id="container1">300x100 px</div>
<img src="http://i.imgur.com/RRUe0Mo.png" alt="">
<div id="container2">300x100 px</div>
</div>
I am trying to make a flex container of divs in which all the divs will have the same width (two divs per line, 50% width of the container each of them).
I have set the divs inside the container with max-width: 50%; because I want them to be equals but it does not seem to respect this max-width when there is only one item in this line.
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
JSFiddle in which you can see how the width of the third element is bigger than the others.
Why the flex divs inside the container are not respecting max-width property?
Thanks in advance!
you can reset or switch box model to include padding within width calculation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3.org/TR/css-ui-3/#box-sizing
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
box-sizing:border-box;/* includes borders & padding within width calculation
}
https://jsfiddle.net/b5h9rjcd/1/
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>