I have a container containing some text, as well as a box positioned to the right. I would like for this box's width and height to be the same, and for both to be equal to the container's total height. I thought I could achieve this by using CSS's built-in aspect ratio. This works for the button, but the button's container doesn't seem to expand to fit the child's width, even when the button's container's width is set to fit-content.
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
column-gap: 8px;
width: fit-content;
}
.text {
border: 1px solid blue;
}
.button_container {
display: flex;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
height: 100%;
aspect-ratio: 1 / 1;
}
<div class="container">
<div class="text">
Hello, World!<br/>Nice day!
</div>
<div class="button_container">
<div class="button">
<svg width="16" height="16" viewBox="0 0 20 20">
<path d="M10,1.445c-4.726,0-8.555,3.829-8.555,8.555c0,4.725,3.829,8.555,8.555,8.555c4.725,0,8.555-3.83,8.555-8.555C18.555,5.274,14.725,1.445,10,1.445 M10,17.654c-4.221,0-7.654-3.434-7.654-7.654c0-4.221,3.433-7.654,7.654-7.654c4.222,0,7.654,3.433,7.654,7.654C17.654,14.221,14.222,17.654,10,17.654 M14.39,10c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,9.55,14.39,9.752,14.39,10 M14.39,12.702c0,0.247-0.203,0.449-0.45,0.449H6.06c-0.248,0-0.45-0.202-0.45-0.449c0-0.248,0.203-0.451,0.45-0.451h7.879C14.187,12.251,14.39,12.454,14.39,12.702 M14.39,7.298c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,6.848,14.39,7.051,14.39,7.298"></path>
</svg>
</div>
</div>
</div>
I'm looking for pure CSS solutions to the issue.
define a fixed width for the button. for example width: 50px;
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
column-gap: 8px;
width: fit-content;
}
.text {
border: 1px solid blue;
}
.button_container {
display: flex;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
height: 100%;
width: 50px;
aspect-ratio: 1 / 1;
}
<div class="container">
<div class="text">
Hello, World!<br/>Nice day!
</div>
<div class="button_container">
<div class="button">
<svg width="16" height="16" viewBox="0 0 20 20">
<path d="M10,1.445c-4.726,0-8.555,3.829-8.555,8.555c0,4.725,3.829,8.555,8.555,8.555c4.725,0,8.555-3.83,8.555-8.555C18.555,5.274,14.725,1.445,10,1.445 M10,17.654c-4.221,0-7.654-3.434-7.654-7.654c0-4.221,3.433-7.654,7.654-7.654c4.222,0,7.654,3.433,7.654,7.654C17.654,14.221,14.222,17.654,10,17.654 M14.39,10c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,9.55,14.39,9.752,14.39,10 M14.39,12.702c0,0.247-0.203,0.449-0.45,0.449H6.06c-0.248,0-0.45-0.202-0.45-0.449c0-0.248,0.203-0.451,0.45-0.451h7.879C14.187,12.251,14.39,12.454,14.39,12.702 M14.39,7.298c0,0.248-0.203,0.45-0.45,0.45H6.06c-0.248,0-0.45-0.203-0.45-0.45s0.203-0.45,0.45-0.45h7.879C14.187,6.848,14.39,7.051,14.39,7.298"></path>
</svg>
</div>
</div>
</div>
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
I am trying to make a fluid flex field where if there is no enough space then it should drop to next line. As you can see in this example if you decrease the size of the field it doesnt drop to next line because I am using flex.
.container {
width: 80%;
border: 2px solid #ddd;
padding: 20px;
display: flex;
overflow: hidden;
}
.container .panel {
flex: none;
}
.container .panel-info {
display: flex;
align-items: center;
}
.container .panel-info .dot {
background-color: #ccc;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 8px;
}
<div class="container">
<div class="panel">Some Long Info</div>
<div class="panel-info">
<div class="dot"></div>
<div class="info">Information</div>
</div>
</div>
Use flex-wrap: wrap.
More information on MDN about the flex-wrap property
Question: I am having two div's A & B where DIV A is having min and max width with resize horizontal feature and Div B is auto width.
Now when Div A has 4 divs in it when each div is removed the width of DIVA is auto shrinked but when i dragg div A to right and remove an element in DIV A the width is not auto
.resizeE {
border-right: 6px solid;
display: flex;
align-items: stretch;
justify-content: flex-start;
align-content: center;
width: auto;
min-width: 150px;
max-width: 250px;
height: 100%;
resize: horizontal;
overflow: auto;
}
.E1 .E2 .E3 .E4 {
border: 2px solid #A0A0A0;
width: 50px;
height: 50px;
}
.box {
width: 30px;
float: left;
margin: 5px;
}
.red {
color: red;
background: pink;
}
.blue {
color: blue;
background: light-blue;
}
.green {
color: green;
background: pink;
}
.map {
width: 100%;
}
<div style="height:100%;width:100%;background: #e2e2e2;overflow-y: hidden;overflow-x: hidden;">
<div class="resizeE">
<div class="red box">E1</div>
<div class="red box">E2</div>
<div class="blue box">E3</div>
<div class="green box">E4</div>
</div>
<div class="col p-5">
<div class="map">
block B
</div>
</div>
</div>
shouldn't the flex items of the .center-section-container be closer together when this property is use? they doesn't seem to be affected all.
i'm using flex wrap so the items are now in different lines but two far away to each other, I would like them to be closer on the cross axis.
here is what i have done:
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.center-section-container>* {
border: solid yellow;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h2>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
I am not 100% sure if you mean this, but in order to have less vertical distance between the flex items, you need to remove the default margin of the h1 and h4 tags (BTW, you have a typo in the closing h2/h4 tag).
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
I added margin: 0 to the child elements which moves them closer together. This alone would align the flex items at the top of their container, and I understood you want them in the vertical middle, so I also added / changed align-content: center; for the container. HTH
body {
border: solid orange;
width: 100vw;
height: 100vh;
color: lightgrey;
}
.main-container {
border: solid black;
width: 100%;
max-width: 840px;
margin: 0;
display: flex;
}
.main-container>* {
border: solid pink;
}
.square {
min-height: 154.53px;
min-width: 171.53px;
border-radius: 10px;
background-color: #555;
}
/**here I have the problem**/
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
.text1 {
color: black;
}
.subtext {
flex-basis: 60%;
}
.button-grey,
.button-white {
border-radius: 5px;
flex-basis: 40%;
height: 50px;
}
.button-grey {
background-color: grey;
color: white;
}
.button-white {
border: solid grey;
background-color: white;
color: inherit;
}
.aside {
width: 200px;
}
<article class=main-container>
<div class="square"></div>
<section class="center-section-container">
<h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
<h4 class="subtext">Fisioterapia general </h4>
<button class="button-grey" type="button" name="button">Reservar
</button>
<button class="button-white" type="button" name="button">Pedir
</button>
</section>
<aside class="aside">
<h3 class="valoraciones"> 24 valoraciones </h3>
<div class="number-container">
<div class="number">8,9</div>
</div>
<a class="comentarios" href="#"> ver comentarios</a>
<a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
</a>
</aside>
</article>
What I want to do basically is have a header and a container always centered if they're small than the screen (body with 100% height). In case the content and header are bigger than the screen, then allow to scroll inside its container (notice that the header shouldn't be scrollable).
I managed to make it work in Chrome but not in IE10. This is the JSFiddle.
var p = $('p');
$('button').click(function(){
for(var i=0; i<30; i++){
$('.content').append(p.clone());
}
});
.screen{
border: 1px solid red;
padding: 3px;
height: 300px;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
flex-direction: column;
-ms-flex-direction: column;
}
.header{border: 1px solid blue; padding: 10px;}
.content{ border: 1px solid green; background: #aaa; overflow: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add more content</button>
<div class="screen">
<div class="header">
Header
</div>
<div class="content">
<p>This is the content</p>
</div>
</div>
http://jsfiddle.net/w8zg8hr2/2/
You need to add flex: 0 1 auto; to the .content div and overflow: auto; to the .screen container. IE10 uses the 2012 syntax which defaults to flex: 0 0 auto instead of the modern value of flex: 0 1 auto;
var p = $('p');
$('button').click(function () {
for (var i = 0; i < 30; i++) {
$('.content').append(p.clone());
}
});
.screen {
border: 1px solid red;
padding: 3px;
height: 300px;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
flex-direction: column;
-ms-flex-direction: column;
overflow: auto;
}
.header {
border: 1px solid blue;
padding: 10px;
}
.content {
border: 1px solid green;
background: #aaa;
overflow: auto !important;
flex: 0 1 auto; /* Add this property value */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add more content</button>
<div class="screen">
<div class="header">Header</div>
<div class="content">
<p>This is the content</p>
</div>
</div>
Browserstack screenshot of Win7/IE10: