Flexbox that goes full width when forced onto new line?
I have two divs lined next to each other using the following CSS:
.overlay {
display: flex;
flex-wrap: wrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
When the width of the screen gets too small (i.e. .interactions can no longer fit) a new row is created in which interactions are placed.
What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?
javascript html css flexbox
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
add a comment |
I have two divs lined next to each other using the following CSS:
.overlay {
display: flex;
flex-wrap: wrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
When the width of the screen gets too small (i.e. .interactions can no longer fit) a new row is created in which interactions are placed.
What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?
javascript html css flexbox
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
1
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
BTW it break line becauseflex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
– לבני מלכה
Nov 12 '18 at 7:52
1
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the.interactionselement ends up on its own line, occupying entire width of the parent box.
– amn
Nov 12 '18 at 9:32
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
I still do not understand..interactionswill occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?
– amn
Nov 13 '18 at 9:20
add a comment |
I have two divs lined next to each other using the following CSS:
.overlay {
display: flex;
flex-wrap: wrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
When the width of the screen gets too small (i.e. .interactions can no longer fit) a new row is created in which interactions are placed.
What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?
javascript html css flexbox
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
I have two divs lined next to each other using the following CSS:
.overlay {
display: flex;
flex-wrap: wrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
When the width of the screen gets too small (i.e. .interactions can no longer fit) a new row is created in which interactions are placed.
What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?
javascript html css flexbox
javascript html css flexbox
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
edited Nov 12 '18 at 9:28
Eugene Mihaylin
9601424
9601424
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
asked Nov 12 '18 at 7:47
tweetypi
6,9922499205
6,9922499205
1
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
BTW it break line becauseflex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
– לבני מלכה
Nov 12 '18 at 7:52
1
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the.interactionselement ends up on its own line, occupying entire width of the parent box.
– amn
Nov 12 '18 at 9:32
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
I still do not understand..interactionswill occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?
– amn
Nov 13 '18 at 9:20
add a comment |
1
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
BTW it break line becauseflex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
– לבני מלכה
Nov 12 '18 at 7:52
1
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the.interactionselement ends up on its own line, occupying entire width of the parent box.
– amn
Nov 12 '18 at 9:32
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
I still do not understand..interactionswill occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?
– amn
Nov 13 '18 at 9:20
1
1
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
BTW it break line because
flex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap– לבני מלכה
Nov 12 '18 at 7:52
BTW it break line because
flex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap– לבני מלכה
Nov 12 '18 at 7:52
1
1
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the
.interactions element ends up on its own line, occupying entire width of the parent box.– amn
Nov 12 '18 at 9:32
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the
.interactions element ends up on its own line, occupying entire width of the parent box.– amn
Nov 12 '18 at 9:32
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
I still do not understand.
.interactions will occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?– amn
Nov 13 '18 at 9:20
I still do not understand.
.interactions will occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?– amn
Nov 13 '18 at 9:20
add a comment |
4 Answers
4
active
oldest
votes
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
@media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
add a comment |
maybe you should use media queries?
@media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
answered Nov 12 '18 at 8:00
knighteq
662
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
add a comment |
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
answered Nov 12 '18 at 7:56
David Marabottini
1707
add a comment |
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
@media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257790%2fflexbox-that-goes-full-width-when-forced-onto-new-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
@media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
add a comment |
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
@media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
add a comment |
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
@media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
There's two situations here
screen gets too small
if screen goes below 400px we're okay with the rules so far
if screen is above 400px but still too small, we end up with conflicting max-widths
is there anyway to do this without using javascript?
It can be achieved with media queries
@media only screen and (max-width: 600px) {
.instructions { min-width: 100% }
}
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
answered Nov 12 '18 at 7:57
Silviu-Marian
6,36853565
6,36853565
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
add a comment |
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
add a comment |
maybe you should use media queries?
@media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
answered Nov 12 '18 at 8:00
knighteq
662
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
add a comment |
maybe you should use media queries?
@media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
answered Nov 12 '18 at 8:00
knighteq
662
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
add a comment |
maybe you should use media queries?
@media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
answered Nov 12 '18 at 8:00
knighteq
662
maybe you should use media queries?
@media (max-width: 400px) {
.interactions {
max-width: 100%;
}
}
answered Nov 12 '18 at 8:00
knighteq
662
answered Nov 12 '18 at 8:00
knighteq
662
answered Nov 12 '18 at 8:00
knighteq
662
answered Nov 12 '18 at 8:00
knighteq
662
662
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
add a comment |
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
unfortunately that works on window width not the elements width
– tweetypi
Nov 12 '18 at 8:09
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
please, paste your all code, maybe then i can help you more.
– knighteq
Nov 12 '18 at 8:30
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
@tweetypi You talk in your question about screen size, this solution should fix the issue's you have. And if it doesn't, rewrite your question and include all code so we might have a better look at the issue.
– Thomas Scheffer
Nov 12 '18 at 8:46
add a comment |
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
answered Nov 12 '18 at 7:56
David Marabottini
1707
add a comment |
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
answered Nov 12 '18 at 7:56
David Marabottini
1707
add a comment |
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
answered Nov 12 '18 at 7:56
David Marabottini
1707
you shuld to use the nowrap property,
the flex-wrap: wrap create new line when the intenrnal divs are too little, the nowrap not create, the code to remain in the same line is
.overlay {
display: flex;
flex-wrap: nowrap;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width: 400px;
margin: 5px;
}
you can find the documentation here https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp
Also you can find other details of the usage and the browser compatibility here https://caniuse.com/#search=flex-wrap
answered Nov 12 '18 at 7:56
David Marabottini
1707
answered Nov 12 '18 at 7:56
David Marabottini
1707
answered Nov 12 '18 at 7:56
David Marabottini
1707
answered Nov 12 '18 at 7:56
David Marabottini
1707
1707
add a comment |
add a comment |
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
@media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
add a comment |
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
@media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
add a comment |
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
@media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
Using media queries is a challenge here because the breakpoint at which the problem occurs is dependent on the size of the flexible width .mainContent
So a better approach would be to have a min-width on .mainContent and use a media query for the breakpoint which is a sum of the min-width of .mainContent and max-width of .interactions + margins
.overlay {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
}
.mainContent {
flex-grow: 1;
flex-basis: auto;
min-width:400px;
margin: 5px;
}
.interactions {
flex-basis: auto;
flex-grow: 1;
max-width:400px;
margin: 5px;
}
@media only screen and (max-width: 840px){
.mainContent, .interactions{
max-width:none;
min-width:none;
}
}
See it in action here: https://jsfiddle.net/gnu12Lfs/
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
answered Nov 12 '18 at 8:15
Siddharth Audhinarayanan
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257790%2fflexbox-that-goes-full-width-when-forced-onto-new-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
show you html please
– לבני מלכה
Nov 12 '18 at 7:48
BTW it break line because
flex-wrap: wrap;:developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap– לבני מלכה
Nov 12 '18 at 7:52
1
The CSS you posted already works that way -- what's the problem? Whenever the content does not fit, the
.interactionselement ends up on its own line, occupying entire width of the parent box.– amn
Nov 12 '18 at 9:32
@amn "What I'd like to do when that happens is for interactions to switch to max-width: 100%, is there any way to do this without using javascript?"
– tweetypi
Nov 12 '18 at 22:34
I still do not understand.
.interactionswill occupy the entire width of the flex container, when wrapped on its own line, with your CSS. What's the problem?– amn
Nov 13 '18 at 9:20