This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 2 years ago.
I currently am trying to figure out how to accomplish this:
The green box would have contents that may be greater than the width, and so the div needs to scroll horizontally, if longer than space available.
The red box may or may not be present, and can have a variable number of elements. If I have to make it a fixed width box, I can, if necessary.
The overall width however for the grey box can't be more than 100%.
I would use flexbox css.
.outer{
width: 90%;
background-color: #C4C4C4;
height: 40px;
border: 10px solid #C4C4C4;
display: flex;
flex-flow: row no-wrap;
}
.left {
flex-grow: 1;
background-color: #9BB18C;
height: 40px;
overflow-x: scroll;
}
.right {
flex-shrink: 1;
background-color: #D6514B;
height: 40px;
margin-left: 10px;
}
<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">
YYYYYYY</div>
</div>
<br/><br/>
<div class="outer">
<div class="left">
<div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="right">YYY</div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 10 months ago.
<div style="height: 100%; background: red">
<div style="height: 100px; background: green">
</div>
<div style="background: blue;">
<h1>Content</h1>
</div>
</div>
How to put content of blue box to center of free plase of red block.
Parent block must have height 100%.
Like this:
Flex box would be good for this issue.
* {
margin: 0px;
padding: 0px;
}
.h {
height: 100px;
background: green;
}
.m {
background: blue;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 100px);
}
<div class="w">
<div class="h">header</div>
<div class="m" >
<h1>Content</h1>
</div>
</div>
You should read about flex-box since it will make your life much easier when it comes to such alignments and I am sure you wont regret it. (https://www.w3schools.com/css/css3_flexbox.asp)
(Additional resource for flex-box, my personal favorite: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Please let me know if this isn't the desired outcome and I will try to fix it according to your request.
.parent {
height: 100%;
background: red;
}
.header {
height: 100px;
background-color: green;
}
.content {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
height: 500px;
}
<div class="parent">
<div class="header">
</div>
<div class="content">
<h1>Content</h1>
</div>
</div>
This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I have two divs that I want to put side by side in a container. The problem I am having is that the left div has a veriable size depending on the content and the right div should use all available space.
<style>
div.left {
display: inline-block;
outline-width: 0;
background-color: yellow;
padding-right: 5px;
}
div.right{
display: inline-block;
max-width: 100%;
outline-width: 0;
background-color: green;
}
.container{
background:black;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
I tried with flex, table-cell, ... - almost everything. What am I missing?
display: flex would do the job if you also assign flex:1 to the .right div, so it will take all the remaining space:
div.left {
background: peachpuff;
padding: 10px;
}
div.right{
flex: 1;
background-color: yellowgreen;
padding: 10px;
}
.container{
background:black;
display: flex;
width:450px;
}
<div class="container">
<div class="left">
Variable content here
</div>
<div class="right">
remaining space
</div>
</div>
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
See problem in codepen: https://codepen.io/pencillrpal/pen/QWLOLGv
I have a flex container in which I'm going to have a horizontal slider with elements as long as the full page width.
But I realized I can't control the width of the child elements, because they will always have a width that makes them fit the container, and they don't extend beyond it.
I've found a trick though. If I wrap my child divs to a div one by one it will work as I want it to.
Why does this work this way?
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 40vh;
max-width: 100%;
overflow-x: hidden;
border: 5px solid black;
margin: 0 auto;
}
.box {
position: relative;
width: 90vw;
margin: 10px;
line-height: 10vh;
text-align: center;
background: black;
color: white;
border: 5px solid red;
}
<h1>Box should have 100vw width</h1>
<div class="container">
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<h1>This one has though</h1>
<div class="container">
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
</div>
You can control the width of the flex children. All flex children have default flex values to control the flex-grow and flex-shrink properties. Disable these properties and you'll have control over the width.
Add these lines to your CSS.
/**
* Disable flex grow and shrink so that it no longer tries to divide the
* space between the .box elements.
*
* Use flex-basis or width to control the width of the element.
*/
.box {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 90vw;
width: 90vw;
}
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
Trying to have a container div display an horizontal scrollbar when its child is too long. Instead, the container div itself overflows its parent.
Here is my code:
.root {
background-color: blue;
padding: 5px;
display: flex;
}
.left {
background-color: yellow;
flex: 0 0 auto;
width: 60px;
}
.right {
background-color: green;
padding: 5px;
}
.container {
overflow-x: scroll;
}
.content {
background-color: red;
width: 900px;
height: 100px;
}
<div class="root">
<div class="left">
</div>
<div class="right">
<span>Hello World</span>
<div class="container">
<div class="content">
</div>
</div>
</div>
</div>
Ideally, the green div would not overflow it's parent (the blue div) nor have a scrollbar. The horizontal scrollbar should appear in the container class div.
Simply add overflow: hidden to .right:
.right {
background-color: green;
padding: 5px;
overflow: hidden
}
This will ensure that the red box doesn't overflow its parent and will allow scrolling within it.
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY