Flexbox layout equal widths (paragraph text not wrapping) - html

The first image is way wider than the other two because of the space taken up by the <p></p> element.
How do I ensure that the p wraps at the width of the flex box?
I have a working bootply.
/* CSS used here will be applied after bootstrap.css */
body { background-color: rgba(20,10,10,.4); }
div.container { background-color: white; }
#media (min-width: 1380px) {
div.container {
width: 1400px; } }
div.container section {
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-between;
}
div.container section div img {
width:100%;
}
div.container section div p {
width: 100%;
}
div.container section div {
border: 1px solid black;
flex-grow:1;
}
div.container section div+div {
margin-left:4rem;
}
div.container section h1 {
color: #8f825a;
font-size: 2.7rem;
text-transform: none;
}
div.container section h2 {
color: #8f825a;
font-size: 1.8rem;
}
<div class="container">
<h3>H3</h3>
<h2>H2</h2>
<section>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>foo dsalkfjds lakfjdlsk fksdalj fldsfjad slkafjdslk fdsajflkds aflkdjsaflkdsjfdslkafjdlks fjlkdsj</p>
</div>
<div>
<img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAKAAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDU4MUQyM0ZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDU4MUQyNEZGQzkxMUU2OEU3Q0ExNzE2NDQzNDYzOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVENTgxRDIxRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVENTgxRDIyRkZDOTExRTY4RTdDQTE3MTY0NDM0NjM4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQAFBAQGRIZJxcXJzImHyYyLiYmJiYu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">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
<div>
<img src="">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
</section>
</div>


Instead of flex-grow: 1 use flex: 1:
div.container section div {
flex: 1;
}
revised demo
By using flex-grow: 1 by itself, you're leaving the two other flexibility properties at their default values. Namely, flex-shrink: 1 and flex-basis: auto (content width, in row-direction).
By using the flex property you are defining all three properties: flex: 1 is equivalent to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0 (initial main size 0, not auto)
This allows your flex items to be equal width, regardless of their initial main size.
Other answers here are telling you to add flex-basis: 0 to your code. That effectively does the same thing. The spec recommends you use the flex property, however:
7.2. Components of
Flexibility
Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.
For a complete explanation of the difference between flex-basis: auto and flex-basis: 0, see this post: Make flex-grow expand items based on their original size


You can add flex-basis: 30%; to div.container section div:
http://www.bootply.com/moTWJ5T9dB


In Your Example just add - flex-basis: 0; to all divs like this:
div.container section div {
border: 1px solid black;
flex-grow: 1;
flex-basis: 0;
}
This results that the divs get flexible, means they receive the specified proportion of the remaining space. E.g. They all have the same width.

Related

Text inside a flex box is wrapping?

JS Fiddle
I have two parent boxes positioned next to each other with flex box, inside of them I have another flex box so the h2 and p can sit side by side.
I've not set a width of the parent boxes and ideally I do not want to.
Why is my text content wrapping when there is space for each flex box to expand? In the example the title is wrapping after Is - why can't the h2 expand so This Is Title A appears all on one line?
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
}
h2 {
flex-basis: 40%;
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</div>
</div>

The problem is that percentage lengths use the parent container for reference, and that's missing in your code. The parent of the h2 and p items don't have a defined width.
Once you define a width on the parent (which I know you don't want to do), the problem is resolved. Otherwise, use another unit of length, white-space: nowrap, or some other compromise.
10.2 Content width: the width
property
<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.2 (and 2.1).

Add flex-grow: 1 and a flex-shrink: 0 to your h2. This will prevent the h2 of shrinking. Also, since you are limiting the relative maximum the h2 can grow (40%) it would break anyway.
EDIT:
flex-grow/shrink was missing in the .container>div. Add the rule flex: 1 1 auto; so they expand evenly to fill all the width.
.container {
background: grey;
display: flex;
}
.container>div {
align-items: center;
display: flex;
flex: 1 1 auto;
}
h2 {
flex: 1 0 40%;
white-space: nowrap:
/*flex-basis: 40%;*/
}
p {
flex-basis: 60%;
}
<div class="container">
<div>
<h2>This Is Title A</h2>
<p>Content.</p>
</div>
<div>
<h2>This Is Title B</h2>
<p>Content.</p>
</div>
</div>

How to center flexbox sticky footer with a set width

I'm using flexbox to make my footer stick to the bottom, and for the most part it's working. My problem is, I need the content to be within a specified width, that I set with max-width and center with margin-left:auto; and margin-right:auto;. When I activate flexbox, the contents are squished by the margin-left and margin-right rules, and do not take up the space defined by max-width. I would like to know why this is happening and how to get my footer to look how I want it to look.
Here is how I want my footer to look:
And here is how flexbox is affecting it:
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
If I change max-width to width then it works, but then when I test it in my browser using the device-mobile setting to see how it would look on a mobile device, the width property makes the footer too big and messes up the content. If I take out the margin-left and margin-right properties, then my footer looks like this:
As you can see it's no longer centered. I can't use the flex-basis property because that only affects the height of the footer. Please help.
Edit
Here is a snippet with margin-left and margin-right taken out and replaced with display:flex; and justify-content:space-around;. Be sure to click "Full page" to view with a larger viewport.
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
display: flex;
justify-content: space-around;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>

This can be done easily with justify-content: space-between;, but looking at your code I feel you may misunderstand a bit how Flexbox itself works. You want your footer to act as a flex container so you can manipulate the child spans as well.
Consider checking out freeCodeCamp's Flexbox Challenges to get a better idea how Flexbox works.
EDIT: CodePen now reflects what OP was meaning to immitate.
Here's a CodePen to play around with.
What this does is makes your footer both a child and container.
First your body becomes a container to allow the main content to grow to fill the space pushing your footer to the bottom of the page. The flex-direction is set to column to flow vertically.
You create a wrapper for your footer, because currently your footer is in the body container which is set to flex-direction:column; where in this case, you want the direction to be row to style horizontally. By default display:flex; will assume you wanted row so direction doesn't need declared. We then justify-content to the center so no matter the width the footer itself will be centered.
You treat your <footer> as both a child and container. As a child we tell it not to grow or shrink and set the basis to auto. As a container, we tell it to distribute space-between its children which allows a consistently equal amount of space between the left & right spans.
body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
margin: 1em;
width: 80%;
border: 1px solid #000;
justify-content: space-between;
}
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
</footer>
</div>

I gave up trying to get this to center with flexbox. Instead I used the calc function to calculate the padding-left and padding-right of my <footer> tag. Here is what I came up with (I'm using 47.5rem instead of 67.5rem because I think it's easier to see the behavior).
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
display: flex;
align-items: center;
padding-left: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-right: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
#left {
flex: 1;
order: 1;
}
#mid {
flex: 0 0 auto;
order: 2;
}
#icons {
order: 3;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>

flex-grow is not working with images

Currently, I'm trying to make a list. On the left side images which fit into my "display flex layout" and resize on all browsers. My "flex-grow layout" list 1 for the image and 3 for the description. Without images, everything is fine, but with my image (100% width) it does not fit into the 1/3 of the row ...
Does anybody know a solution?
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div:nth-of-type(1) {-webkit-flex-grow: 1;}
#main div:nth-of-type(2) {-webkit-flex-grow: 3;}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main img { width: 100% }
<div id="main">
<div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
<div style="background-color:lightblue;">Description</div>
</div>
<hr>flex-grow without Image<hr>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;">Description</div>
</div>
Thank you
Simon

You have the image container – the flex item div – set to flex-grow: 1. That's fine.
Except the default value of flex-basis is auto (spec).
So, you're telling the item that it's initial main size (i.e., flex-basis) should be the size of its content (the image). That's exactly what's happening. The item takes the natural size of the image.
Add this to your code:
flex-basis: 0
OR, better yet, this:
flex: 1
which is short for:
flex: 1 1 0
which is short for:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
From the spec:
7.2. Components of
Flexibility
Authors are encouraged to control flexibility using the flex shorthand
rather than with its longhand properties directly, as the shorthand
correctly resets any unspecified components to accommodate common
uses.
For an explanation of the difference between flex-basis: auto and flex-basis: 0, see this post:
Make flex-grow expand items based on their original size
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
/* adjustment here */
#main div:nth-of-type(1) {
flex: 1;
}
#main div:nth-of-type(2) {
flex-grow: 3;
}
#main img {
width: 100%;
height: auto;
}
<div id="main">
<div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
<div style="background-color:lightblue;">Description</div>
</div>
<hr>flex-grow without Image
<hr>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;">Description</div>
</div>

CSS Flexbox layout with unknown child height 100%

I'm having a problem with what I assumed would be a relatively simple CSS layout.
I want...
a footer at the bottom (fixed height)
a nav bar on the left side (fixed width)
an outer content pane on the right side (dynamic size)
And in the content pane...
a ribbon on the top (fixed height)
an inner content div (dynamic size)
I'm trying to use flexbox for this, as it seems to be the best option at present (grid is too unstable and not well supported).
The problem is that my inner content div is (in reality) several layers deep inside the outer content div. This means I cannot be using flexbox directly on it, as flex is a direct parent-child relationship (and I'm a few layers deep, as per the comment in the code).
Ideally I want to do it as my below code, however as you can see, the inner div is flowing OUTSIDE the containing outer div's box, behind the footer, and then outside the entire container (for the height of the ribbon div).
It would seem "height: 100%" just does not deal with it properly... but I can't have every item in the chain from "content" to "inner" set up with flexbox - as I literally do not have control over this. (I'm using angular, and it generates a bunch of tags every layer, and they're dynamically named).
body {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-direction: column;
height: 100%
}
.body {
display: flex;
flex: 1;
}
.content {
background-color: blue;
flex: 1;
}
.ribbon {
background-color: orange;
height: 99px;
}
.inner {
overflow: auto;
height: 100%;
}
.footer {
background-color: lime;
flex: 0 0 38px;
}
<body>
<div class="container">
<div class="body">
<div class="content">
<div class="ribbon">STUFF<br>BLAH</div>
<!-- there is actually a bunch of other stuff in between "content" and "inner"-->
<div class="inner">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
I have made a plunker to demonstrate the problem...
https://plnkr.co/edit/zzFHhLK7nef1VNQkwp7U?p=preview
Any help would be greatly appreciated!

What I recommend is making a second layer of flexbox, by adding display: flex and flex-direction: column to .content, in addition to its existing flex: 1:
.content {
flex: 1;
display: flex;
flex-direction: column;
}
Considering flexbox is a parent-child relationship, you'll need to add flex: 1 to anything that is a direct child of .content, which can be done by using the child combinator >:
.content > * {
flex: 1;
}
In addition to this, you'll need to set a max-height on the .ribbon:
.ribbon {
max-height: 99px;
}
Combined together, this can be seen working in the following example:
body {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-direction: column;
height: 100%
}
.body {
display: flex;
flex: 1;
}
.content {
background-color: blue;
flex: 1;
display: flex;
flex-direction: column;
}
.content > * {
flex: 1;
}
.ribbon {
background-color: orange;
height: 99px;
max-height: 99px;
}
.inner {
overflow: hidden;
height: 100%;
}
.footer {
background-color: lime;
flex: 0 0 38px;
}
<body>
<div class="container">
<div class="body">
<div class="content">
<div class="ribbon">STUFF<br>BLAH</div>
<!-- there is actually a bunch of other stuff in between "content" and "inner"-->
<div class="inner">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br> content
<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
Hope this helps! :)

Flex items not wrapping

My issue is that I have a section within the article that I made a flexbox, and when I reduce the size of the browser those 3 elements in that flexbox will overlap. Any tips?
body {
display: flex;
flex-direction: column;
}
header {
background: blue;
}
main {
display: flex;
flex-direction: row;
flex: auto;
}
article {
flex: 2;
overflow-y: auto;
background: red;
}
aside {
flex: 1;
overflow-y: auto;
background: green;
}
.test {
display: flex;
flex-direction: row;
flex: auto;
align-items: stretch;
background: pink;
}
<body>
<header>
Test
</header>
<main>
<article>
<section>
test
</section>
<section class="test">
<div>
div one
</div>
div two
<div>
div three
</div>
<div>
</div>
</section>
</article>
<aside>
aside
</aside>
</main>
<footer>
</footer>
</body>
http://jsfiddle.net/zLmcyjy6/

Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.
In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.
Each <section> flex item has a flex: 1 applied. This translates to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.
I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).
And then for smaller screens, using a media query, set flex-basis to something like:
#media screen and ( max-width: 500px ) {
.fitness, .education, .pastimes {
flex-basis: 100%;
display: flex; /* optional; for nicer alignment */
flex-direction: column; /* optional; for nicer alignment */ }
}
Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.