I have a simple two columns layout:
on the left there is some text
on the right there are one or more link buttons
Here my code
.container {
padding: 20px;
border: 2px solid black;
display: flex;
gap: 15px;
border-radius: 10px;
}
.left-column {
border: 1px solid lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.right-column {
border: 1px solid tomato;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-link {
border: 2px solid black;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
white-space: nowrap;
}
<div class="container">
<div class="left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="right-column">
<a class="button-link">A link button</a>
<a class="button-link">Another link button</a>
</div>
</div>
I need the width of the right column to be no bigger than the size of the largest button (in this case the second one Another link button).
The text on the left takes up the whole remaining space.
The text inside the link button should not be on a new line.
How it is
How it should be
Check this one
.container {
padding: 20px;
border: 2px solid black;
display: flex;
gap: 15px;
border-radius: 10px;
}
.left-column {
border: 1px solid lightgray;
display: flex;
justify-content: center;
align-items: center;
flex:auto;
}
.right-column {
border: 1px solid tomato;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
flex:1;
}
.button-link {
border: 2px solid black;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
white-space: nowrap;
}
<div class="container">
<div class="left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="right-column">
<a class="button-link">A link button</a>
<a class="button-link">Another link button</a>
</div>
</div>
<style>
.container {
padding: 20px;
border: 2px solid black;
display: flex;
gap: 15px;
border-radius: 10px;
}
.left-column {
border: 1px solid lightgray;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.right-column {
border: 1px solid tomato;
display: flex;
flex-direction: column;
}
.button-link {
border: 2px solid black;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
white-space: nowrap;
}
</style>
Just add flex:1 button-link e.g:
.button-link {
border: 2px solid black;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
white-space: nowrap;
**flex: 1;**
}
Related
In this example child2 has dynamic data which can be increase or decrease, and child3 has fixed height. main parent has dynamic window height, so I want child2 will show entirely without having scroll until whole remaining spaced got covered and child1 should cover remaining space with scroll inside.
.parent {
display: flex;
height: 100%;
flex-direction: column;
}
.child1 {
overflow: auto;
display: flex;
flex-direction: column;
background: red;
}
.child2 {
display: flex;
flex-direction: column;
background: blue;
}
.child3 {
display: flex;
flex-direction: column;
background: orange;
}
<div class="parent">
<div class="child1">data</div>
<div class="child2">dynamic data</div>
<div class="child3">fixed data</div>
</div>
.mainCon{
height: 390px;
width: 200px;
border: 1px solid;
}
.upperBox{
height: calc(100% - 50px);
display: flex;
flex-direction: column;
}
.remaining{
background-color: blue;
flex-grow: 1;
overflow: auto;
height: 10px;
}
.adjustable{
background-color: green;
overflow: auto;
max-height: calc(100% - 10px);
}
.fixed{
height: 50px;
background-color: red;
}
<div class="mainCon">
<div class="upperBox">
<div class="remaining">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<div class="adjustable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
</div>
<div class="fixed">
</div>
</div>
Is this the desired behavior (you should change the height in .child3 to your desired value):
.parent {
display: flex;
height: 100%;
flex-direction: column;
}
.child1 {
overflow: auto;
display: flex;
flex-direction: column;
background: red;
flex: 1;
}
.child2 {
display: flex;
flex-direction: column;
background: blue;
flex: 0 0 auto;
}
.child3 {
display: flex;
flex-direction: column;
background: orange;
height: 3rem;
}
I can suggest you to use Flex:
body{
background:blue;
height: 100vh;
margin:0;
}
.container{
display:flex;
background:white;
height:100%;
flex-direction:column;
}
.box:nth-of-type(1){
/* according to remain Space*/
background:green;
flex:1 1 auto;
}
.box:nth-of-type(2){
/* according to inner Content*/
background:yellow;
flex:0 1 auto;
}
.box:nth-of-type(3){
/*fixed Height*/
background:red;
flex:0 1 50px;;
}
<div class="container">
<box class="box">according to remain Space</box>
<box class="box">according to inner Content</box>
<box class="box">fixed height</box>
</div>
This question already has answers here:
text-overflow is not working when using display:flex
(5 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I'm aware of these posts:
Prevent a child element from overflowing its parent in flexbox
text-overflow ellipsis on flex child not working
Why don't flex items shrink past content size?
No answer from there fixes the issue I have in the code snippet below. Here's the html tree:
parent flex column
child flex row
label flex (so I can align text vertically)
The only way I could make it work is by making the label an inline-block, but I'd really like to keep the flex.
What I'd already done:
On the child:
Set white-space: nowrap
Set min-width: 0
Set overflow: hidden
On the parent
Set min-width: 0
Permutate the options above with flex-grow: 1 and max-width: 100%
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
align-items: center;
display: flex;
flex-flow: row nowrap;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
You need to remove flex for .label and to align, use align-items: center; for its parent.
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
align-items: center;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
flex-flow: row nowrap;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
.parent-container {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
width: 100%;
}
.item-container {
border: 1px solid #ebf0ff;
border-radius: 0.25rem;
display: flex;
flex-flow: row nowrap;
height: 3.25rem;
margin: 0.5rem 1rem;
padding: 0.5rem 1rem;
}
.label {
align-items: center;
font-family: sans-serif;
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="parent-container">
<div class="item-container">
<span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
</html>
Remove:
display: flex;
flex-flow: row nowrap;
If you want it vertically aligned, add this to .label:
margin-top: auto;
margin-bottom: auto;
When I give a line-height to the text div(span, p, etc.) and drag it in the browser, the selection box has an ugly empty space like this:
I want to lift up the text itself inside of the selection box for looking more better when the user is dragging it. I've searched about this topic on Google but couldn't find any clues to do this.
Are there any ways to solve this problem?
Code:
* {
margin: 0 auto;
padding: 0;
}
div, section {
position: relative;
}
.text {
width: 400px;
height: 600px;
font-family: Helvetica;
line-height: 2rem;
/* giving flex doesn't work to the text itself. */
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
/* again, align-self or content doesn't affected to the text. */
align-self: center;
align-content: center;
border: 1px solid black;
}
p {
display: inline-flex;
vertical-align: center; /* vertical align doesn't work to the text */
align-self: center;
align-content: center;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
[enter image description here][1]
I give you the sample code.
.text {
width: 400px;
height: 600px;
font-family: Helvetica;
display: flex;
border: 1px solid black;
}
p {
align-self: center;
// line-height: 3em;
margin: 1em;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</div>
[1]: https://i.stack.imgur.com/hGxMS.png
I'm trying to get even space between the font awesome icon and the paragraph of text to it's right, which is separated by a divider (in this the case, the right-border of the icon).
How can I make the space between the icon and it's border even, the same as the space between icons border and paragraph of text? I'm using flex's space-between at the moment, as well as some padding, but the space isn't evenly distributed, and it gets worse as the screen resizes.
body {
height: 100vh;
width: 100%;
}
#container {
height: 90%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#display {
height: 76%;
width: 100%;
background-color: #ECECEC;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
height: 100%;
width: 95%;
}
.content i {
width: 25%;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid black;
}
.text {
width: 50%;
justify-content: center;
align-items: center;
padding: 0 6%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="container">
<div id="display">
<div class="content">
<i class="fas fa-balance-scale fa-7x"></i>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque volutpat libero, at venenatis dolor rutrum vel. Donec fermentum eleifend tortor, at sollicitudin est rutrum nec. Fusce eget vehicula ex. Vestibulum semper gravida nulla, in aliquam ipsum dignissim nec.</p>
</div>
</div>
</div>
</div>
Try this.
.content i {
padding-right: 35px;
}
I have a child element inside a parent container, the child has element a width of 50%, and a min-width of 30rem.
When I bring the window size in the from the right, after the child element hits its min-width of 30rem it starts to break its containing / parent element, despite there being plenty of available space.
Is there anyway of setting it so the min-width value of 30rem remains, but when the window is reduced in size it still slides inside the parent element (like it does before the min-width value is hit)?
It's sending me nuts. (In the code StackOverflow code-snippet you'll probably need to view full screen to see the issue)
Codepen: https://codepen.io/emilychews/pen/wXBdvz
body {margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.tl {color: white;}
.section {
position: relative;
display: flex;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 2.48832rem 0;
}
.row {
position: relative;
justify-content: center;
margin: auto;
width: 80%;
box-sizing: border-box;
background: blue;
width: 90%;
right: 5%;
justify-content: flex-start;
padding: 4.299rem 0;
}
.one-col.col-1 {
position: relative;
width: 50%;
margin: 0;
padding: 3.583rem 2rem;
left: 40%;
background: #172731;
min-width: 30rem;
top: 7rem;
color: white;
}
<section class="section">
<div class="row">
<div class="one-col col-1">
<h3 class="tl">Title</h3>
<h3 class="tl"><span id="customerbase">Do your thing</span></h3>
<hr>
<p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="seework" href="#">SEE WORK</a></p>
</div>
</div>
</section>
You'll have to use calc to adjust the left positioning. This is not a perfect solution but I think it achieves what you are after.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.tl {
color: white;
}
.section {
position: relative;
display: flex;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 2.48832rem 0;
}
.row {
position: relative;
justify-content: center;
margin: auto;
width: 80%;
box-sizing: border-box;
background: blue;
width: 90%;
right: 5%;
justify-content: flex-start;
padding: 4.299rem 0;
}
.one-col.col-1 {
position: relative;
width: 50%;
margin: 0;
padding: 3.583rem 2rem;
left: calc(60% - 30rem);
background: #172731;
min-width: 30rem;
top: 7rem;
color: white;
}
<section class="section">
<div class="row">
<div class="one-col col-1">
<h3 class="tl">Title</h3>
<h3 class="tl"><span id="customerbase">Do your thing</span></h3>
<hr>
<p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="seework" href="#">SEE WORK</a></p>
</div>
</div>
</section>