I have encountered an issue regarding CSS's aspect-ratio on child elements.
I've been trying to style an element's width and height (both the same) to be equal to the height of the parent container. Using height: 100%; and aspect-ratio: 1; makes this work, however;
It seems the parent container ignores the children's resized width when using aspect-ratio, meaning the parent container ends up with the wrong width.
I've included a codepen illustrating the issue. Notice how the width does increase with each new element, but the width increase does not correspond to the actual width of the added elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 8px;
}
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
column-gap: 16px;
width: fit-content;
}
.button_container {
display: flex;
column-gap: 8px;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
.first_case {
height: 100%;
aspect-ratio: 1 / 1;
}
.second_case {
height: 100%;
width: 56px;
}
<p>Fixed width (this is how it should look)</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button second_case">
A
</div>
<div class="button second_case">
B
</div>
</div>
</div>
<p>Aspect ratio</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button first_case">
A
</div>
<div class="button first_case">
B
</div>
</div>
</div>
https://codepen.io/th3o4or/pen/ZEoqMrm
Related
I have encountered an issue regarding CSS's aspect-ratio on child elements.
I've been trying to style an element's width and height (both the same) to be equal to the height of the parent container. Using height: 100%; and aspect-ratio: 1; makes this work, however;
It seems the parent container ignores the children's resized width when using aspect-ratio, meaning the parent container ends up with the wrong width.
I've included a codepen illustrating the issue. Notice how the width does increase with each new element, but the width increase does not correspond to the actual width of the added elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 8px;
}
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
column-gap: 16px;
width: fit-content;
}
.button_container {
display: flex;
column-gap: 8px;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
.first_case {
height: 100%;
aspect-ratio: 1 / 1;
}
.second_case {
height: 100%;
width: 56px;
}
<p>Fixed width (this is how it should look)</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button second_case">
A
</div>
<div class="button second_case">
B
</div>
</div>
</div>
<p>Aspect ratio</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button first_case">
A
</div>
<div class="button first_case">
B
</div>
</div>
</div>
https://codepen.io/th3o4or/pen/ZEoqMrm
There is container:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
Block class="container" has height of screen height.
How to make the same height for block1, block2? so that they occupy the entire height of the parent?
I have tried flex
grid can help you here without even setting an height which can be optionnal , mind box-sizing if height, borders and paddings are involved:
.container {
display: grid;
grid-template-rows: repeat(2, 1fr);/* the keyword for the value : 1fr */
}
.container>div {
border: solid;
}
<div class="container">
<div class="block1">give<br>me<br>some<br>heights</div>
<div class="block2"></div>
</div>
usefull link to know more about it https://css-tricks.com/snippets/css/complete-guide-grid/
flex would be for te browser's height:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.container>div {
flex: 1;
border: solid;
margin: 2px;
/* possible*/
}
/* reset */
body {
margin: 0;
height: 100vh;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
You can use flex to get this done. You could also use float and set the height of the blocks to 100% and the widths of them to 50%.
.container {
height: 100vh;
display: flex;
flex-direction: column;
border: 4px red solid;
}
.block1, .block2 {
height: 50%;
}
.block1 {
border: 4px green solid;
}
.block2 {
border: 4px blue solid;
}
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
</div>
I want my two buttons, that are actually <a> tags, stick with my input, and be the same size as input. Image perfectly describes what I want to achieve.
Note that I am just starting to learn SASS and CSS. I have tried with this but no luck
NumberInput.js
<div
className="NumberInput"
data-key={dataKey}>
<div className="numberInputField">
<input
data-key={dataKey}
type="text"
name="number"
value={getValue(datakey)}
onChange={onChange(datakey)}/>
</div>
<div className="buttonsField">
<div className="row">
<ValueChangeButton/>
</div>
<div className="row">
<ValueChangeButton/>
</div>
</div>
</div>
NumberInput.scss
$inputMaxWidth: 450px;
$maxHeight: 80px;
$btnFieldMaxWidth: 150px;
.NumberInput{
max-width: $inputMaxWidth;
max-height: $maxHeight;
.numberInputField{
display: inline-block;
text-align: center;
max-width: inherit;
max-height: inherit;
}
.buttonsField{
display: inline-block;
max-width: $btnFieldMaxWidth;
max-height: $maxHeight;
.button{
width: auto;
height: auto;
}
}
}
The result I get is, buttons are contained in their respective rows, but are not the same size as input, and they are flying all around the page. Also, if I change the className of my input, and set the className of its <div> to "numberInputField", it doesn't change its width and height.
Flexbox is perfect for this:
body {
margin: 1em;
}
.NumberInput {
display: flex;
max-width:450px;
margin:auto;
}
.numberInputField {
flex: 3; /* say 3/4 of width */
display: flex;
flex-direction: column;
}
input {
padding: 1em 4em;
flex: 1;
}
.buttonsField {
flex: 1; /* say 1/4 of width */
display: flex;
flex-direction: column;
}
.row {
flex: 1; /* share width equally */
}
a {
width: 100%;
display: block;
background: rebeccapurple;
text-align:center;
text-decoration: none;
font-size: 1.5em;
color: white;
border:1px solid grey;
}
<div class="NumberInput">
<div class="numberInputField">
<input type="submit" />
</div>
<div class="buttonsField">
<div class="row">
↑
</div>
<div class="row">
↓
</div>
</div>
</div>
I've been working on learning flexbox for layout and have been unable to figure out why text is not wrapping inside the flex-item. The text is breaking out of the container like this:
html,
body {
height: 100%;
}
.main {
max-width: 10em;
margin: 1em auto;
}
.flex-row {
display: flex;
align-items: center;
justify-content: center;
min-height: 12em;
border: 1px solid red;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-item {
padding: 5px;
border: 1px solid black;
}
<div class="main">
<div class="flex-row">
<div class="flex-column">
<div class="flex-item">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="flex-item">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</div>
</div>
</div>
There are no spaces between your text.
The default value of the word-break property is normal, meaning that a continuous line of text has no line breaks.
For these reasons, your text is not wrapping and overflowing the container.
Add word-break: break-all to .flex-item.
html,
body {
height: 100%;
}
.main {
max-width: 10em;
margin: 1em auto;
}
.flex-row {
display: flex;
align-items: center;
justify-content: center;
min-height: 12em;
border: 1px solid red;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-item {
padding: 5px;
border: 1px solid black;
word-break: break-all; /* new */
}
<div class="main">
<div class="flex-row">
<div class="flex-column">
<div class="flex-item">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="flex-item">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</div>
</div>
</div>
From MDN:
word-break
The word-break CSS property specifies whether or not the browser
should insert line breaks wherever the text would otherwise overflow
its content box.
In contrast to overflow-wrap, word-break will create a break at
the exact place where text would otherwise overflow its container
(even if putting an entire word on its own line would negate the need
for a break).
Values
normal
Use the default line break rule.
break-all
To prevent overflow, word breaks should be inserted between any two
characters (excluding Chinese/Japanese/Korean text).
keep-all
Word breaks should not be used for Chinese/Japanese/Korean (CJK) text.
Non-CJK text behavior is the same as for normal.
There's actually another reason – flexbox-specific – why the flex items are overflowing the container. Here's the explanation:
Why doesn't flex item shrink past content size?
To contain the items (without the need for the text to wrap), you could apply min-width: 0, overflow: hidden or overflow: auto to .flex-column.
html,
body {
height: 100%;
}
.main {
max-width: 10em;
margin: 1em auto;
}
.flex-row {
display: flex;
align-items: center;
justify-content: center;
min-height: 12em;
border: 1px solid red;
}
.flex-column {
display: flex;
flex-direction: column;
overflow: hidden; /* new */
/* overflow: auto; */
/* min-width: 0; */
}
.flex-item {
padding: 5px;
border: 1px solid black;
}
<div class="main">
<div class="flex-row">
<div class="flex-column">
<div class="flex-item">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="flex-item">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</div>
</div>
</div>
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>