1

I'm trying to add 4 footer boxes with equal width but not explicitly defining the flex: 1 value in css so that box with more content should take bit more space than it's siblings [If i'm right]. And flex:1; to make all child take equal width. All the child have same class. But upon running the code chrome doesn't respect the flex:1 value. What do I do to fix this problem.

See the image for this unexpected behaviour.

Image

.footer-widgets{
 margin: 1% 7%;
 border-radius: 1px;
 overflow: hidden;
 background-color: #eee;
 box-shadow: 0 0 1px #aaa;
 display: flex;
 align-items: stretch;
}

.footer-widget-area{
 flex: 1;
 padding: 10px;
 margin: 5px;
 /*overflow: hidden;*/
 background-color: #ddd;
 border-radius: 1px;
 box-shadow: 0 0 1px #aaa;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vipin Yadav
  • 73
  • 4
  • 12
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Nov 02 '16 at 16:18
  • You may need to add `min-width: 0` to the flex items that don't shrink as expected. http://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Nov 02 '16 at 17:23
  • 1
    @Michael_B Thank you so much. Setting min-width: 0; did the job (y) – Vipin Yadav Nov 03 '16 at 16:31

0 Answers0