I'm trying to shrink elements smaller than their paddings.
But I cannot.
I want box to be 5px. But it is 80px because I have padding: 40px
How can I make box 5px without removing paddings?
I tried to make it flex. But it didn't help.
.wrapper {
width: 100%;
white-space: nowrap;
/* display: flex; */
}
.box {
/* flex: 1; */
width: 5px;
height: 50px;
background-color: red;
padding: 40px;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
max-width: 5px;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
If i am not wrong and you want to make your .box div to smaller size use below css.
.box {
width: 5px;
height: 50px;
background-color: red;
padding: 40px;
display: inline-block;
border: 1px solid green;
box-sizing: border-box;
min-width: 10px;
transform: scale(0.5); //this will make you box smaller without removing the padding
}
Related
As image, is it possible if the green element is aligned center when its needed width is shorter than parent width - yellow shape width, but align right if not? Thanks.
Without any library (e.g. Bootstrap), you could use a div with display: table; and margin: 0 auto;, nested with another div with display: inline-block; property.
This is the example:
.row {
margin-bottom: 10px;
}
.yellowBlock {
display: inline-block;
background-color: yellow;
border: 1px solid #ffc107;
border-radius: 5px;
width: 20%;
height: 30px;
}
.pre-greenBlock {
display: inline-block;
width: 70%;
}
.greenBlock {
display: table;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid green;
border-radius: 5px;
padding: 0 10px;
height: 30px;
}
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Short text</div>
</div>
</div>
<div class="row">
<div class="yellowBlock"></div>
<div class="pre-greenBlock">
<div class="greenBlock">Very looooooooooooooooooooooooong</div>
</div>
</div>
Obviously, you need control the width of your yellow and green block.
This isn't the unique solution. You could use too a table or Bootstrap with row and columns.
I have a container flexbox element filling the remaining space inside a container. Inside that, I want an element that can fill the parent and scroll on overflow. Problem is, is always just overflows the container, and I can't set height: 100%, since that won't take into account a header with a dynamic height.
Please see this code snippet for a clearer example. I want to scroll on the purple div, but the red div keeps overflowing the blue div, which it shouldn't. I would highly prefer to not change the HTML, only the CSS.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Not sure if this is what you are looking for. I have just added overflow: scroll to content class and it seems to work.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
overflow-y: scroll;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header. It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Using overflow-y: hidden; on the .content hides everything that would overflow it's parent container
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
box-sizing: border-box;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
box-sizing: border-box;
overflow: hidden;
}
.boxes {
padding: 10px;
background: purple;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}
.box {
height: 200px;
border: 1px solid black;
box-sizing: border-box;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Here, if you check, I have given max-height: calc(100% - 38px); to the .content to have a max-height. Giving flex: 1 will provide it a min-height only, it will grow more if the there is content and there is space in its wrapper. So by providing a max-height, we can avoid this issue
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
padding: 10px;
background: blue;
width: 300px;
display: flex;
flex-direction: column;
}
.header {
padding: 10px;
background: green;
}
.content {
padding: 10px;
background: red;
flex: 1;
max-height: calc(100% - 38px);
}
.boxes {
padding: 10px;
background: purple;
overflow-y: auto;
max-height: 100%;
}
.box {
height: 200px;
border: 1px solid black;
background: orange;
}
<div class="wrapper">
<div class="header">
This is the header.
It has multiple lines.
</div>
<div class="content">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
I am trying to achieve this using flexbox:
I know how to do it by using a hidden element as in this fiddle:
.container {
display: flex;
justify-content: space-between;
border: 3px solid blue;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.box:first-child {
visibility: hidden;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
But this seems like too hacky to be right.
Use the flex property that sets the flexible length on flexible items. That way, I'm telling the white-box to take all available space but the first white-box will be 50% larger than the normal white -box, that will take the place of what's left
.container {
display: flex;
border: 3px solid blue;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.white-box {
background: white;
flex: 1;
}
.white-box:first-child {
flex: 1.5
}
<div class="container">
<div class="white-box"></div>
<div class="box"></div>
<div class="white-box"></div>
<div class="box"></div>
</div>
you can easily achieve this kind of layout by using CSS grid
.grid-container {
display: grid;
grid-template-columns: auto 100px 200px 100px;
border: 1px solid blue;
}
.grid-container > div {
text-align: center;
font-size: 30px;
padding: 20px 0px;
}
.red{
background-color: red;
}
<div class="grid-container">
<div>1</div>
<div class="red">2</div>
<div>3</div>
<div class="red">4</div>
</div>
Hope this will be helpful for you
you need to remove
.box:first-child {
visibility: hidden;
}
So I have a red bar inside a container which lies between two black boxes. The boxes are fixed in size while the red bar and the container are based on percentages.
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
How can this be achieved?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
JSFiddle
CSS3 has a new flex display style supported by the major browsers.
.container {
display: webkit-flex;
display: flex;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
}
.bar {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
To set the box elements to a specific width use min-width rather than width
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even IE9.
.bar {
width: calc(100% - 60px);
}
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: calc(100% - 60px);
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
Try "table" layout
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
width: 80%;
height: 40px;
background: grey;
display: table;
}
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
vertical-align: top;
}
.box {
height: 50%;
margin: 0 7px;
border: 15px solid black;
border-top: none;
border-bottom: solid 1px black;
/*float: left;*/
}
.bar {
width: 80%;
height: 100%;
background: red;
/*float: left*/
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="box"></div>
</div>
<div class="bar"></div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
First div should fill up remaining height that's left while second div should be positioned at the bottom with it's initial height.
DEMO:
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>
The answer to this would vary from markup to markup, but in your case you can just add this to your first element:
height: 100%;
This works because of your flex display property of the container. A different property on the container would likely require another solution.
Demo
Full code
.container {
width: 240px;
height: 400px;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
height: 100%;
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>
You need to make height auto to container class so depend on length of string your height is increase.
<style>
.container {
width: 240px;
height: auto;
background: #E0E0E0;
display: flex;
flex-direction: column;
}
.first {
border :1px solid black;
padding: 1em;
box-sizing: border-box;
}
.second {
border: 1px solid blue;
padding: 1em;
box-sizing: border-box;
}
</style>
<div class="container">
<div class="first">
I SHOULD FILL WHATS REMAINING AFTER SECOND ONE
</div>
<div class="second">
<div>
I SHOULD BE AT THE BOTTOM FILLING ONLY MY OWN HEIGHT
</div>
</div>