Menu
Here's the scenario:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 1px solid black;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
flex: 1 1 33.33333%;
white-space: nowrap;
max-width: 33.33333%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here</button>
</div>
</div>
</body>
</html>
The buttons are the same size but the problem is that they don't scale in size according to the flex item with longest content. Instead, the text of the last button here overflows. This is how it looks like:
And this is how I want it to look like:
So in short, I want 3 flex buttons with same width and height where the width should be determined according to button with the longest content. Also, I'd rather do this with CSS only (if it's possible).
EDIT: Because there seems to be some misunderstandings, I would like to clarify that the width should change dynamically and thus work with any texts given for the buttons, not just with the ones shown above. In other words, you can't just add e.g. width: 10rem for flex-item directly because it only works in specific situation.
932
To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.
The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .
flex fails here for this kind of behavior :
Display:grid could do in the futur here.
Your question mention 3 elements:
A tutorial https://css-tricks.com/snippets/css/complete-guide-grid/
browser supports http://caniuse.com/#search=grid
a Polyfill https://github.com/FremyCompany/css-grid-polyfill/
http://gridbyexample.com/browsers/
.flex-container {
display: flex;
border: 1px solid black;
margin: 1em;
}
.flex-container .flex-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
width: 100%;
white-space: nowrap;
}
@supports (display: grid) {
.discl {
display: none
}
}<p class="discl"> grid CSS seems not supported by your browser</p>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here</button>
</div>
</div>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long text & Long text here</button>
</div>
</div>Also, from a known amount of elements, column CSS might be usefull here
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 1px solid black;
margin:1em;
}
.flex-container .flex-container {
display:block;
-moz-column-count:3;
-moz-column-gap:0;
-webkit-column-count:3;
column-count:3;
-webkit-column-gap:0;
column-gap:0;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
width: 100%;
white-space: nowrap;
}<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here</button>
</div>
</div>
<div class="flex-container">
<div class="flex-container">
<button class="flex-item">Foo</button>
<button class="flex-item">Bar</button>
<button class="flex-item">Long ass text here Long ass text here</button>
</div>
</div>In both cases , display flex is only usefull to shrink second container to its content.in a block parent, float or display:inline-block at that level would do too.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
