Flexbox: flex-grow issues

Question

Could someone help me with this pen? (I'm working with flexbox) https://codepen.io/barbudo/pen/XRMVqX

Basically, I'm trying to get the fontawesome icons to grow and occupy all the available space in the row. As they have a .social class, I set this class to flex: 1; but it doesn't work.

footer {
 display: flex;
 flex-wrap: wrap;
 width: 300px;
 height: 100%;
 margin: auto;
 border: 1px dotted yellow;
 padding: 0;
}

footer p {
 border: 1px dotted gray;
 margin: 0;
 padding-bottom: 0px;
}

.social-bar {
 display: flex;
 border: 1px solid white;
}

.social {
 flex: 1;
}

What's my mistake and where is it?

score 0 · Answer 1 · answered Apr 28 '17 at 16:29

Since footer is flex, .social-bar is a flex child in the row and isn't 100% width. You can set .social-bar to flex: 1 0 0 so it will grow, then your flex: 1 on .social works. But that won't make the icons grow because the icons are fonts. Just increase the font size to make them grow. Also added text-align: center to .social

body, html {
  margin: 0;
  padding: 0;
  color: white;
  background-color: black;
  font-family: 'Ubuntu';
}

a { text-decoration: none; }

#mother {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}

#header-wrapper {
  width: 100%;
  height: 100vh;
}

header {
  display: flex;
  flex: 1 1 auto;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 99%;
}

header h1 {
  display: block;
  box-sizing: border-box;
  width: 300px;
  text-align: center;
  font-family: 'Lora' !important;
  font-size: 60px;
}

header p {
  display: block;
  box-sizing: border-box;
  width: 300px;
  text-align: center;
  line-height: 1.5;
  padding: 9px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.fa-chevron-down {
  display: none !important;
  color: white;
}

#life:first-child {
  margin-top: 10px;
}

#boole {
  display: block;
  width: 300px;
  height: auto;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 5px;
}

.lWrapper p {
  display: block;
  box-sizing: border-box;
  width: 300px;
  margin: auto;
  text-align: justify;
  line-height: 1.5;
  padding: 15px 9px;
}

h3 {
  display: block;
  box-sizing: border-box;
  width: 300px;
  text-align: center;
  margin: auto;
  margin-top: 10px;
  padding: 10px 0px;
}

ul {
  display: block;
  box-sizing: border-box;
  width: 300px;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

li { line-height: 1.5; }

.year { font-weight: 700; }

.footer-wrapper {
  width: 100%;
  height: 100px;
  border: 1px dotted gray;
}

footer {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 100%;
  margin: auto;
  border: 1px dotted yellow;
  padding: 0;
}

footer p {
  border: 1px dotted gray;
  margin: 0;
  padding-bottom: 0px;
}

.social-bar {
  display: flex;
  border: 1px solid white;
  flex: 1 0 0;
}

.social {
  flex: 1 0 0;
  text-align: center;
}

.social .fa {
  font-size: 5em;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lora:700|Ubuntu:300,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>George Boole: A tribute page for Free Code Camp</title>
  </head>

  <body>
    <div id="mother">
      <div id="header-wrapper">
        <header>
          <h1>George Boole</h1>
          <p id="pHeader"><i class="fa fa-quote-left fa-2x fa-border fa-pull-left"></i><br><em>A renaissance of logical studies in modern times begins with the publication in 1847 of George Boole’s 'The Mathematical Analysis of Logic.'</em><i class="fa fa-quote-right fa-2x fa-border fa-pull-right"></i></p>
          <a href="#life"><i class="fa fa-chevron-down fa-3x"></i></a>
        </header>
      </div> <!-- end of "header-wrapper" -->

      <div id="life">
        <div class="wrapper">
          <img id="boole" src="images/boole.png" alt="A portrait of George Boole. He's looking left, wearing a beard, suite and tie.">
        </div> <!-- end of "wrapper" -->

        <div class="lWrapper">
          <p>Most people will never hear about George Boole, but this man's importance to mathematics - and all developments that have been built on his contributions - is undeniable and great.</p>
          <p>In the two sections below, you'll find what I consider to be the most important facts about him. Yes, there could be a lot more. I know it! But my point is to introduce him to you, and if you want to know more, you can follow the link at the bottom.</p>
          <p>Happy reading :)</p>
          <h3>EARLY LIFE</h3>
          <ul>
            <li><span class="year">1815</span>:<br> Boole was born in Lincoln, Lincolnshire, England, on November the 2nd. He was the son of John Boole Sr (1779–1848), a shoemaker, and Mary Ann Joyce.</li>
            <li><span class="year">1831</span>:<br> At age 16, Boole became the breadwinner for his parents and three younger siblings, taking up a junior teaching position in Doncaster at Heigham's School.</li>
            <li><span class="year">1834</span>:<br> At age 19, Boole successfully established his own school in Lincoln. Four years later he took over Hall's Academy in Waddington, outside Lincoln, following the death of Robert Hall.</li>
            <li><span class="year">1838</span>:<br> From 1838 onwards, Boole was making contacts with sympathetic British academic mathematicians and reading more widely. He studied algebra in the form of symbolic methods, as far as these were understood at the time, and began to publish research papers.</li>
          </ul>
        </div> <!-- end of "sWrapper" -->

        <div class="sWrapper">
          <h3>LATER LIFE</h3>
          <ul>
            <li><span class="year">1841</span>:<br> He moved back to Lincoln, where he ran a boarding school. Boole immediately became involved in the Lincoln Topographical Society, serving as a member of the committee, and presenting a paper entitled <em>"On the origin, progress and tendencies Polytheism, especially amongst the ancient Egyptians, and Persians, and in modern India"</em> on 30 November.</li>
            <li><span class="year">1849</span>:<br> Boole's status as mathematician was recognised by his appointment as the first professor of mathematics at Queen's College, Cork (now University College Cork (UCC)) in Ireland.</li>
            <li><span class="year">1850</span>:<br> He met his future wife in Cork while she was visiting her uncle John Ryall, who was Professor of Greek. They married some years later in 1855.</li>
            <li><span class="year">1864</span>:<br> In late November, Boole walked under heavy rain from his home at Lichfield Cottage in Ballintemple to the university - a distance of three miles - and lectured wearing his wet clothes. He soon became ill, developing a severe cold and high fever.</li>
            <li><span class="year">1864</span>:<br> On December 8, he died of fever-induced pleural effusion.</li>
          </ul>
        </div> <!-- end of "sWrapper" -->

        <div class="footer-wrapper">
          <footer>
            <p><i class="fa fa-search" aria-hidden="true"></i> All info comes from <a href="#"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a> Wikipedia.</p>

            <div class="social-bar">
              <a class="social" href="mailto:gecmartins@zoho.com?Subject=Found%20you%20on%20Codepen!"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
              <a class="social" href="https://twitter.com/barrbudo" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
              <a class="social" href="https://plus.google.com/u/0/+GuilhermeEduardoCamposMartins" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
              <a class="social" href="https://www.linkedin.com/in/gecmartins/" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
            </div>
          </footer>
        </div>

      </div> <!-- end of "life" -->
    </div> <!-- end of "mother" -->
  </body>

Thanks a bunch for the help! I applied your changes, and the results were as you stated. I recreated the footer in a different manner, and my Flexbox code has worked better: `.footer-wrapper { width: 100%; height: 100px; display: flex; justify-content: center; } footer { display: flex; flex-direction: column; width: 300px; height: 100%; padding: 0; } .pdiv { display: flex; align-items: center; justify-content: center; } .socialdiv { display: flex; width: 100%; justify-content: space-around; align-items: center; } .social i { font-size: 30px; }` — gmartinss, Apr 28 '17 at 19:32
I also split the footer into two divs: `.pdiv` for the paragraph, and `.socialdiv` for the social icons. I was watching the Flexbox series by Wes Bos, and he was able to make his icons fill the avaible space. It's the last video of the bunch, and it's called "Flexbox App" if anyone is interested. Also, is it common that you repeat the same code and you get a different result even though the same browser is being used to open the html file? — gmartinss, Apr 28 '17 at 19:38

score 0 · Answer 2 · answered Apr 28 '17 at 16:30

0

I believe since it's an icon you can only modify the font-size, it's not going to grow/shrink with it's container.

.social-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  border: 1px solid white;
}

.social i {
  font-size: 3em;
}

answered Apr 28 '17 at 16:30

StefanBob

4,857
2
32
38

Thanks a bunch, Stefan! – gmartinss Apr 28 '17 at 20:04

Flexbox: flex-grow issues

2 Answers2