I have a text in flexbox item .learn--text which needs to be vertically centered, but word-break: break-word rule doesn't work.
This is the current state
and desired state
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: stretch;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
display: flex;
flex-wrap: wrap;
align-items: center;
flex: 1;
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
Erase all the flex settings from learn--text - they "divide" its content into two parts, the link and the following text, treating them as flex items and therefore units. If you erase that, the result is as follows:
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: center;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
This, is the answer:
.learn {
display: flex;
flex: 0 0 70px;
margin-top: auto;
align-items: center;
height: 70px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
display: inline-block;
flex-wrap: wrap;
align-items: center;
flex: 1;
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
overflow-wrap: break-word;
overflow: hidden;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
Related
There is a panel which have display: flex
.panel {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
column-gap: 2rem;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
background-color: red;
}
Other elements may appear in it, which are also display: flex; (now it's 1 and 2)
.filter {
display: flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
button {
flex-shrink: 0;
&:not(:last-of-type) {
margin-right: 0.5rem;
}
}
}
When overflowing, scrolling should appear. It appears, but the elements overlap each other.
If you add flex-shrink to them: 0; then the overlay disappears, but the horizontal scrolling disappears.
.filter {
flex-shrink: 0; // +
display: flex;
flex-wrap: nowrap;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
}
How fix this issue?
You need to add an extra wrapper above the parent element and move the overflow properties with the wrapper. Also, to prevent folding the .panel should have an absolute width while you have relative.
.wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.panel {
min-width: max-content;
display: flex;
justify-content: flex-end;
column-gap: 2rem;
background-color: red;
}
.filter {
display: flex;
gap: 0.275rem;
padding-left: 0.5rem;
align-items: center;
background-color: #ccc;
outline: 1px solid green;
}
button {
padding: 0.5rem 2.5rem 0.5rem 1rem;
}
<div class="wrapper">
<section class="panel">
<div class="filter">
Age
<button>35-39</button>
<button>40-44</button>
<button>45-49</button>
<button>50-54</button>
</div>
<div class="filter">
Status
<button>Active</button>
<button>Past Due</button>
<button>Trial</button>
<button>Default</button>
</div>
</section>
</div>
I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...
#initial {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
#initial .menu {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
margin: 15px auto 15px auto;
width: 1100px;
border: 1px solid rgba(245, 245, 245, 0.699);
border-radius: 50px;
line-height: 2rem;
font-size: 1.1rem;
overflow: hidden;
}
#initial .menu .menuItem {
display: flex;
flex: 1;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
#initial .menu .menuItem:hover {
background-color: #FDB000;
color: black;
cursor: pointer;
display: flex;
flex: 1;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
<div id="initial">
<div class="menu">
<div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">Δ</div>
<div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
<div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
<div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
</div>
<div class="body">
<h1>NAME OF POOL GOES HERE</h1>
<p class="intro">¡Intro crap will go here!</p>
</div>
</div>
As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives
Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).
Please let me know what I'm doing wrong and/or missing.
JSFiddle of my code (added some things that I didn't include above like body for background-color and color
Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:
#initial{
flex-direction: column;
}
I have a comment section where the user can enter comments, it automatically displays comments and the time the comment was entered.
I want author name to be to the left and date to the right and it should be responsive using flex-box
Here is jsfiddle:
https://jsfiddle.net/68vt3c7s/
Here is what I would like to have
Here is a snippet of what i have:
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>
what do I need to change to get what I want ?
Add for .comments_wrapper the flex: auto; in order to align time to right
Means:
.comments_wrapper {
padding: 32px 21px;
flex: auto; /* here I added */
}
Hope this will help.
.comments_wrapper{
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
}
comments_wrapper selector not taking rest of the place that's why you not seeing the effect. Try like following way:
.comments_wrapper {
padding: 32px 21px;
flex-grow: 1; /* Key Line */
}
You need to set the width of the .comments_wrapper
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
width: 100%; /*add this*/
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
.days{
margin-left: auto;
}
Add flex: auto; to .comments_wrapper css
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-description {
display: flex;
flex-direction: row;
padding: 23px 0px;
border-bottom: 2px solid #EBEBEB;
}
.comments_details {
display: flex;
align-items: center;
justify-content: space-between;
flex-basis: 100%;
margin-top: 27px;
}
.comments_wrapper {
padding: 32px 21px;
flex: auto;
}
.comments-photo img {
border-radius: 300px;
width: 80px;
height: 80px;
position: relative;
top: 37px;
}
<div class="comments-description">
<div class="comments-photo"><img alt="" src="https://randomuser.me/api/portraits/men/84.jpg"></div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">4 minutes ago</span>
</div>
<div class="comments_text">
<p>dingi
</p>
</div>
</div>
</div>
I have some issues with the overflow of a nested flex child. I've set a max-height for the flex parent and let the child stretch themselves, to fit to their content. So far so good, but inside of the childs I've got some nested divs, ul and li. I only want to see the scrollbar inside of the ul, unfortunately it doesn't work. My content will get cut, due to the overflow: hidden. Height: 100% doesn't work for me either.
.modal-column {
display: flex;
flex-direction: column;
flex: 1;
padding: 0px 20px;
max-height: 1300px;
background:grey;
}
.modal-section {
width: 320px;
background: #fff;
padding: 25px;
border-radius: 6px;
margin-bottom: 20px;
box-shadow: 0 0.25rem 0.185rem 0 rgba(0, 0, 0, .04);
cursor: default;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow: hidden;
}
.section-status .modal-container {
padding-bottom: 0px;
}
.modal-container {
margin-bottom: 3px;
padding: 15px 0px;
overflow: hidden;
}
.address-list-container {
padding-top: 18px;
overflow: hidden;
}
.address-list-header {
background-color: #f5f5f5;
padding: .5px 0px;
width: 100%;
}
.address-list-tr {
color: #7b7b7b;
font-size: 12.2px;
-webkit-box-pack: justify;
justify-content: space-between;
align-items: stretch;
display: flex;
padding: .5 0px
}
.address-list-th {
padding: 0px 5px;
display: flex;
flex-direction: column;
flex: 1;
}
.address-list-ul {
margin-top: 18px;
overflow-y: auto;
}
.address-list-li {
-webkit-box-pack: justify;
justify-content: space-between;
align-items: stretch;
display: flex;
padding: 7.5px 0px;
border-bottom: 1px dotted #d6d6d6;
}
.address-list-li:first-child {
padding-top: 0px;
}
.address-list-li:last-child {
border-bottom: none;
}
.address-column {
display: flex;
flex-direction: column;
flex: 1;
font-size: 13.5px;
padding: 0px 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="modal-column">
<section class="modal-section section-status"></section>
<section class="modal-section network-section">
<div class="modal-container">
<h2 class="modal-title">Network</h2>
<div class="address-list-container">
<table class="address-list-header">
<tr class="address-list-tr">
<th class="address-list-th">Name</th>
<th class="address-list-th">Address</th>
</tr>
</table>
<ul class="address-list-ul">
<div class="address-list-li">
<div class="address-column adress-key" title="1">1</div>
<div class="address-column adress-value" title="123">123</div>
</div>
......
</ul>
</div>
</div>
</section>
<section class="modal-section app-section">
<div class="modal-container">
<h2 class="modal-title">1</h2>
<ul class="bs-list-ul">
<li class="bs-list-li">
.......
</li>
</ul>
</div>
</section>
</div>
Try this in your css.
. address-list-ul{
overflow-y:scroll; /*Try this instead*/
}
Hope this could help.
Bit confused here. I am quite tired, so I'm sure I'm making a silly mistake but here's my HTML/CSS:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
}
.CASideBorder {
height: 100%;
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft,
.CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>
And the fiddle.
Shouldn't CASideBorder be taking up 100% of its parent container, which has its height calculated by the text size and padding of CAMiddleTextContainer? Am I missing something really obvious here? Any help is appreciated.
That is because you have align-items: center for the flexbox in which case it will default to the content height.
What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder.
See demo below:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}
.CASideBorder {
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft, .CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>