This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 5 years ago.
I am trying to create something similar to a table with rows and cells, but I don't want to use rows and cells, I am currently using DIV elements and everything is going smooth until I try to adjust the width of the inner DIV elements to fill the width of their parent DIV (which would be the row) without having to do exact calculations for the percentage needed.
.container {
width: 100%;
display: flex;
border: 5px solid black;
}
.container > div {
width: inherit;
display: inline-flex;
border: 5px solid red;
}
.container > div > div {
border: 5px solid green;
height: 50px
}
<div class="container">
<div>
<div>
<span>TEST</span>
</div>
<div>
<span>TEST</span>
</div>
</div>
</div>
From MDN:
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space.
You need to provide flex: 1; to .container > div > div to expand the inner div elements.
.container > div > div {
border: 5px solid green;
height: 50px
}
Demo
You can use the flex property:
.container {
width: 100%;
display: flex;
border: 5px solid black;
}
.container>div {
width: inherit;
display: inline-flex;
border: 5px solid red;
}
.container>div>div {
border: 5px solid green;
height: 50px;
flex: 1;
}
<div class="container">
<div>
<div>
<span>TEST</span>
</div>
<div>
<span>TEST</span>
</div>
</div>
</div>
perhaps this is what you need? (innermost div should inherit width too)
.container {
width: 100%;
display: flex;
border: 5px solid black;
}
.container > div {
width: inherit;
display: inline-flex;
border: 5px solid red;
}
.container > div > div {
width: inherit;
border: 5px solid green;
height: 50px
}
<div class="container">
<div>
<div>
<span>TEST</span>
</div>
<div>
<span>TEST</span>
</div>
</div>
</div>
Here i make a change on your CSS but you need to do a flex when you try to autogrow your divs. Look at the .container > div > div styling.
.container {
width: 100%;
display: flex;
border: 5px solid black;
}
.container > div {
width: inherit;
display: inline-flex;
border: 5px solid red;
}
.container > div > div {
border: 5px solid green;
height: 50px;
flex: 1;
}
<div class="container">
<div>
<div>
<span>TEST</span>
</div>
<div>
<span>TEST</span>
</div>
</div>
</div>
Related
I want .board element to have a square aspect ratio. I want to show two of them side by side, together covering the width of their parent.
I don't want to use width: 50%, because I want to position .wrap element with display: flex.
.board {
position: relative;
background: red;
width: 100%;
height: 0;
padding-bottom: 100%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
When I do it like this, I get two divs with squashed width.
Use aspect-ratio and flex:1
.board {
position: relative;
background: red;
flex:1;
aspect-ratio:1/1;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
Alternatively flex:1 and padding-bottom:50%;
.board {
position: relative;
background: red;
flex: 1;
padding-bottom: 50%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
I made a simple example to test this out. I have one wrapper div with two other div elements inside it set to display: inline-block;. The two inner div elements fall on the same line, but how do I get them centered on the half of the main div they belong to? For example, the blue box in the middle of the left side of the main div and the red box in the middle of the right side of the main div. Code and screenshot below.
Also, the inspector shows a width of 204px for the main-box div and even when I set padding and margin to 0 there's still a gap on the bottom between the blue/red boxes and the border of the main-box. How do I get rid of the gap?
.box-test {
height: 200px;
display: inline-block;
width: 30%;
box-sizing: border-box;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
text-align: center;
border: 1px solid black;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
Use flexbox and margin:auto on both elements and they will get centred like you want and you will also get rid of all the whitespace issues:
.box-test {
height: 200px;
margin:auto;
width: 30%;
box-sizing: border-box;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
border: 1px solid black;
display:flex;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
What you should use is a flexbox for the wrapper. When defining space-around for the 'horizontal alignment' you will get what you want.
For more details on flexbox see here
* {
box-sizing: border-box;
}
#main-box {
border: 1px solid black;
display: flex;
justify-content: space-around;
}
.box-test {
height: 200px;
width: 30%;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
You can use flexbox with property justify-content: space-around on the wrapper.
.box-test {
height: 200px;
width: 30%;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
display: flex;
justify-content: space-around;
border: 1px solid black;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
#main-box {
text-align: center;
border: 1px solid black;
font-size:0;
}
Why it is so?
Please read this:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Removing whitespace between HTML elements when using line breaks
https://jsfiddle.net/evzckd3w/
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I would like to make the following layout:
<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>
to look like this:
Container should have three divs inside:
first div with fixed size
third div with width matching content
second div filling the remaining container witdh. Inside that div there are two spans. The first span should be the same with as it's parent and contain very long line of text that should be dotted if it cannot fit.
I tried the following css code:
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
width: 100%;
}
.container div {
display: flex;
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
flex-direction: column;
flex: 1;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}
but the result is not as I would like because the elements are overflowing outside of container and long text is not dotted.
What should I changed in my css to make this work?
Demo: https://stackblitz.com/edit/js-vnr21c
You need to set min-width:0 on the span's parent
* {
box-sizing: border-box;
}
.main {
width: 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
.container {
display: flex;
}
.container div {
border: 1px solid black;
}
.first {
flex: 0 0 100px;
}
.second {
display: flex;
flex-direction: column;
min-width: 0;
}
span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
.third {
flex: 0 1 auto;
}
<div class="main">
<div class="container">
<div class="first">
fixed size
</div>
<div class="second">
<span>very very very very very very very very long text</span>
<span>other text</span>
</div>
<div class="third">
1000000000000000
</div>
</div>
</div>
I have 3 divs which are horizontally aligned (aqua color). Inside each div, there are two divs (red and black one).
What I am trying to do is, align the black divs horizontally regardless of the red div. The css for the black div is
.black-div {
width: 100%;
height: 45px;
max-width: 235px;
display: inline-block;
color: #33244a;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
text-align: center;
line-height: 43px;
border: 2px dashed #d5d1d8;
border-radius: 6px;
box-sizing: border-box;
}
Output will something like this
I am not good at all in css. I have tried using position: fixed / absolute but no luck.
Try it.
Use div and min-height.
section{
display: inline-block;
border: 1px solid red;
width: 100px;
}
.textarea-wrap{
overflow: hidden;
min-height: 200px;
}
.textarea-wrap > textarea{
width: 100%;
resize: none;
}
.red{
background-color: red;
}
<div>
<section>
<div class="textarea-wrap">
<textarea rows="3">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="10">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
<section>
<div class="textarea-wrap">
<textarea rows="6">12312312</textarea>
</div>
<div class="red">
red
</div>
</section>
</div>
You should use table to make it more manageable, or use absolute positioning on the black div so you can position them measure from the bottom of the blue div.
There may be a solution without the spacer. Im looking for it :)
found solution without spacer justify-content: space-between;
.wrapper {
display: flex;
flex-direction: row; /* flex in a row inside (make columns .col) */
}
.col {
display: flex;
flex-direction: column; /* flex in a column inside */
justify-content: space-between; /* since the elements must not grow, fill the space between them */
flex: 1 1 100px; /* grow and shrink of col allowed to fill row evenly starting at 100px*/
margin: 5px;
border: 3px solid black;
background-color: aqua;
}
.red {
flex: 0 1 auto; /* no vertical (col) growing (so it does not expand vertically) */
border: 3px solid black;
border-radius: 10px;
background-color: red;
margin: 5px;
padding: 10px;
}
.black {
background-color: black;
color: white;
margin: 5px;
padding: 10px;
display: block;
flex: 0 1 auto; /* no growing allowed */
}
.resize {
overflow: hidden;
resize: vertical;
}
<div class='wrapper'>
<div class='col'>
<div class='red'>Some wide wide wide wide wide wide Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red'>Some<br/>much<br/>longer<br/>Text</div>
<div class='black'>Footer</div>
</div>
<div class='col'>
<div class='red resize'>Some Text<br><b><u>Resize me!</u></b></div>
<div class='black'>Footer</div>
</div>
</div>
Edit removed spacer div
Edit2 added css commenting for easier understanding
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>