Hey! Thanks for reading! I've got a web-app login screen. I'm focusing on creating a responsive app-like login page. (no scroll etc)
Issue description:
With a viewport-width of 300px, at 463px and shorter viewport heights, all items fill the entirety of the screen, and the content at the bottom of the page begin to get cut off.
The same can be said with 528px and 650px height.
(so this tells me it's scaling to a particular aspect ratio (phone portrait to relatively squarish aspect ratios. At landscape aspect-ratios, the images become ridiculously big - ...expected but undesired))
Goal: Instead, I would simply like the images to shrink in height and maintain their aspect ratio when the viewport height is changed. (to support the aspect ratio provided by the flex-grow/shrink) as opposed to overflowing and changing that ratio.
note: For those who'd like a simpler example: I think the example is relatively simple. Could it be simpler?, yeah most likely. I'm, not entirely sure what I'd make simpler though.
Codepen: https://codepen.io/gold240sx/pen/eYVdGag (I might suggest to turn devtools on to get a thin width since the design right now is really meant for portrait phones.)
It's quite a bit easier just to copy and paste into whatever editor you prefer.
ORIGINAL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
height:100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100%;
}
.images{
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
flex-grow: 3;
flex-shrink: 3;
}
span img {
max-width: 100%;
max-height: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
display: flex;
max-width: 70%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
max-width: 90%;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
.allButtons {
background-color: rgb(255, 132, 0);
display: flex;
flex-direction: column;
border: 2px red solid;
flex-grow: 2;
flex-shrink: 2;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
background-color: rgb(249, 149, 0);
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 20px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="images" style="background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
UPDATED CSS (loosely based upon the initial answer provided by Chizaram) - image scale achieved - image aspect ratio not guaranteed yet -:
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainImage img,
.secondaryImage img {
max-height: 100%;
max-width: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
max-width: 90vw;
max-height: 40%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 10px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
UPDATE:
Do not forget to remove the old inline styles you declared in the .images div, so they don't revert to previous styling:
<div class="images">...</div> <!-- Remove old inline styles -->
ANSWER:
To achieve this, here are the changes you need to make to your code:
(Please note that I use ellipsis ... to indicate segments of the original code which I did not change, and also for brevity.)
Remove flex properties from the body selector as they are not necessary here. The .container div houses everything on the page. I also cleaned the body rule-set a little by moving the padding and margin properties to the universal selector rule-set as well as using the briefer overflow declaration.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
Leave flex properties in the container selector instead and change its height to 100vh to take up full viewport of the screen.
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
Give the .images div a height of 70vh and set the vertical and horizontal alignments to center. I also removed the flex-grow and flex-shrink properties because they were not necessary in order to achieve the desired result.
.images {
...
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center; /* Vertical alignment in column flex-direction */
align-items: center; /* Horizontal alignment in column flex-direction */
}
Set max widths and heights for center images and their parent divs (totaling 100%). Flex and positioning properties aren't necessary here as well since they are affected by their parent div (.images).
.mainImage {
...
max-width: 60%;
max-height: 60%;
margin: 0 auto;
}
.secondaryImage {
...
max-width: 60%;
max-height: 40%;
margin: 0 auto;
}
Set object-fit type to contain for images. I've also changed the elements from spans to divs to structure the html better. The styles here were previously within the span img rule-set. Copy its styles in this new rule-set and delete it.
.mainImage img,
.secondaryImage img {
...
object-fit: contain;
}
Set the height of the .allButtons div to 30vh to take up the remaining height of the viewport.
.allButtons {
...
height: 30vh;
...
}
Reduce padding for buttons on smaller screen sizes to solve the height problem. I added in a media query to adjust to original button size on larger screens. Feel free to adjust the breakpoint height to any value you desire.
button {
...
padding: 10px;
...
}
#media screen and (min-height: 620px) {
button {
padding: 20px;
}
}
The HTML
<div class="mainImage">
...
</div>
<div class="secondaryImage">
...
</div>
I think I have It!! Both Portrait and Landscape. Granted, because of the use of vh / vw, It may have issues with mobile-browser header bars. :/ Maybe there's some Hacky way to fix. but yeah this is looking good so far. I'd have to test on mobile to see further. Galaxy fold it seems to cut off just a bit off the bottom (just a few px.) In addition, Id take all this CSS and wrap it into a media screen itself, then transitioning into a scrollable webpage... or maybe not. Anyways here's the code... Thank you Chizaram for all you're help! I'm gonna buy you a gift card on payday if you like!
ANSWER:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webApp</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
flex-grow: 1;
flex-shrink: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mainImage img,
.secondaryImage img {
object-fit: contain;
display: flex;
justify-self: center;
}
.mainImage img {
max-height: 25vh;
}
.secondaryImage img {
max-height: 20vh;
width: 100%;
max-width: 90vw;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
object-fit: contain;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
width: 90vw;
max-height: 40%;
margin: 0 auto;
display: grid;
align-content: center;
object-fit: contain;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
flex-grow: 2;
flex-shrink: 1;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 2em;
display: block;
min-width: fit-content;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
#media only screen
and (max-device-width: 1023px)
/* and (min-device-pixel-ratio : 2.0) */
and (orientation: landscape) {
button {
padding: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="images">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
</body>
</html>
Related
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
I've been trying to get familiar with grid while making the sidebar, and I encountered the problem where my grid items/children aren't equal to each-other in height even though they're supposed to be the same size.
* {
margin: 0;
padding: 0;
}
.mainContainer {
height: 500px;
gap: 30px;
display: grid;
grid-row-template: repeat(auto-fill, 1fr);
background-color: black;
color: white;
justify-items: center;
align-items: start;
}
.mainContainer div {
display: grid;
align-content: center;
justify-content: center;
width: 60%;
border: 1px solid yellow;
height: 60%;
border-radius: 10px;
}
.mainContainer img {
height: 50%;
width: 100%;
object-fit: contain;
}
<div class="mainContainer">
<div> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg"> </div>
<div> Box 1 </div>
<div> Box 2 </div>
<div> Box 3 </div>
</div>
Focusing on the image
.mainContainer img{
height: 30px; // set it to any size
object-fit: contain;
}
I think you should use px instead of %
You can use this, it is done without grid, but with a flex-column.
* {
margin: 0;
padding: 0;
}
.mainContainer{
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
background-color: black;
color: white;
}
.mainContainer > * {
height: 25%;
width: 60%;
border: 1px solid yellow;
/* center image / text in children boxes */
display: flex;
justify-content: center;
align-items: center;
}
.mainContainer img {
object-fit: contain;
}
So I have this middle container (div) which consists of 2 smaller div.
Here's the code for the div that wraps both div:
.midContainer{
width: 100%;
height: 30vh;
max-height: 700px;
display: flex;
flex-wrap: wrap;
overflow: auto;
justify-content: space-between;
margin-bottom: 15px;
}
Here's the code for left div:
.tokenInfoBox{
width: 60%;
height: 100%;
max-height: 700px;
// padding: 20px 30px ;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
Here's the code for right div:
.ticketBox{
width: 40%;
height : 100%;
background-color: #0e0304;
box-sizing: border-box;
border-radius: 0 10px 10px 0;
display: flex;
flex-direction: column;
}
Have this added as well:
#media only screen and (max-width: 1060px) {
.tokenInfoBox, .ticketBox {
width: 100%;
}
}
So the content for the left div and right div (both div) display normally in big screen but overflow and overlap div below them in small screen. How do I wrap all the overflow content inside the div?
Here's the image in bigger screen and here's the image in smaller screen where I have to scroll to see all content.
CSS:
.midContainer {
width: 100%;
height: 30vh;
display: flex;
flex-wrap: wrap;
}
.tokenInfoBox {
flex: 1 1 25rem;
height: 100%;
background-color: #1b1b1c;
border-radius: 10px 0 0 10px;
}
.ticketBox {
flex: 1 1 8rem;
height: 100%;
background-color: #0e0304;
border-radius: 0 10px 10px 0;
}
you can use flex in this case when applying flex-wrap.
If i understood well, the problem is because you have set the height of the .midContainer, try something like this:
.midContainer {
display: flex;
width: 100%;
align-self: flex-start;
}
.tokenInfoBox {
width: 60%;
flex-grow: 1;
display: flex;
flex-direction: column;
background: #1b1b1c;
}
.ticketBox {
flex-grow: 1;
display: flex;
flex-direction: column;
background: #0e0304;
width: 40%;
}
this will grow you div to fit the amount of height needed.
Also think about the use of media queries, small devices would be difficult to read 2 divs side by side, maybe should be better one over another
#media (max-width: 768px) {
.midContainer {
flex-direction: column;
}
.tokenInfoBox {
width: 100%;
}
.ticketBox {
width: 100%;
}
}
also I strongly recommend to use tailwind
I am getting white space between my parent div and child div when adding a border to the parent div. I have tried everything (overflow, (min) height/width, increasing border width) but nothing works. I have the same problem with images when.
Does someone know how I can fix this and why this is happening?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
Yes, I have come across this and I think it is related to fractions of a CSS pixel being interpreted in different ways when the system is mapping them to actual screen pixels, there being more than one screen pixel to a CSS pixel on many modern screens. The calculations of course vary on different zoom settings and so sometimes you can see the extra white and sometimes not depending on zoom level.
A practical, if hacky, way of getting round this is to give the parent the same background color as the child if that doesn't mess up other stuff in your styling.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
background-color: black;
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
If that messes up your styling I suppose you could go one (hackier) step further and use linear-gradient backgrounds on the parent to give it a sort of black inner border of a (CSS) px or two and leave the rest as white.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.big-box {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: white;
border: 5px solid darkgreen;
overflow: hidden;
height: 100px;
width: 100px;
background-image: linear-gradient(black 0 2px, transparent 2px calc(100% - 2px), black calc(100% - 2px) 100%), linear-gradient(to right, black 0 2px, white 2px calc(100% - 2px), black calc(100% - 2px) 100%);
}
.box {
flex: 1 1 33%;
min-height: 100%;
min-width: 100%;
background: black;
color: white;
border: none;
overflow: hidden;
}
<div class="container">
<div class="big-box">
<div class="box">
<h2>hello</h2>
</div>
</div>
</div>
I need to make y-axis scrollable block inside left-navbar. And height of this block must fill all free space of the left-navbar. This way, that left-navbar height is 100% of the page and no more.
But history-overflow is not scrollable, and all history-item elements are shown, so they made all left-navbar height bigger than the page height.
Also, when page height shrinks, history-overflow should fill only free space to make left-navbar height not more than 100%. How to make this?
Codepen sandbox example:
https://codepen.io/car1ot/pen/zYqLqKB
HTML code:
<div className="left-navbar">
<div className="history">
<label>History</label>
<div className="history-overflow">
<div className="history-item">*...some content here...*</div>
*...more history-item(s) here...*
</div>
</div>
</div>
CSS (scss) code:
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100%;
padding: 25px 20px;
box-sizing: border-box;
div.history {
display: flex;
flex-direction: column;
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
overflow-y: scroll;
div.history-item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 16px 0 6px;
height: 40px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
}
}
}
}
If you set overflow: hidden to .history and max-height: 100vh to .left-navbar, I think it does what you want. Not sure in the context of your complete layout though (maybe you don't want to use 100vh but a different value there). The important part is that you have to limit the height somewhere.
If I correctly understan you, this is your solution:
body { padding:0; margin:0; }
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100vh; /* This */
padding: 25px 20px;
box-sizing: border-box;
background: rgba(#000, 0.1);
div.history {
display: flex;
flex-direction: column;
height:100%; /* This */
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
background: rgba(blue, 0.1);
overflow-y:scroll;
div.history-item {
display: flex;
align-items: center;
padding: 0 16px 0 6px;
height: 100px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
background: rgba(#000, 0.075);
}
}
}
}