CODEWITHSUNDEEP
htmlcssflexbox
radzak
radzak

Reputation: 3128

Flex item shrinks and hides its content

I am trying to create a flexbox that distributes space equally amongst its 2 children. The issue I encountered is that after I minimize the screen, the content of the first child is becoming hidden.

See: https://jsfiddle.net/jo6dj8ne/

Gif showing the problem

I'd like the content of the info-section div to always be visible, but the map-section div to shrink and the scrollbar to appear.

<div class="contact-container">
  <div class="info-section">
    ... some content (info-section is also a flexbox)
  </div>
  <div class="map-section"></div>
</div>

Upvotes: 1

Views: 4638

Answers (3)

radzak
radzak

Reputation: 3128

The issue was setting flex to 1, which was equivalent to setting it to 1 1 0. At the time I was not familiar with flex-grow, flex-shrink and flex-basis CSS properties, that's why I was having trouble making it work.

After setting flex of info-section to 1 0 auto it no longer shrinks and its initial size is equal to the size of its content.

Working example here.

Upvotes: 2

Diego Fortes
Diego Fortes

Reputation: 9800

Simply add min-height: 300px; to .info-section. This will force the container to always have at least 300px of height. If it's bigger than that, it will scroll.

Complete CSS code:

html, body {
  height: 100%;
}

.contact-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;

  .info-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 300px;
    .social {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 1em;
      margin-top: var(--padding-large);
    }
  }

  .map-section {
    background-color: blue;
    min-height: 200px;
    flex: 1;
  }
}

Upvotes: 0

Nidhi
Nidhi

Reputation: 1453

Just give overflow: auto; to .info-section
try this code: 

html, body {
  height: 100%;
}
.contact-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}
.contact-container .info-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow: auto;
}
.contact-container .info-section .social {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  margin-top: var(--padding-large);
}
.contact-container .map-section {
  background-color: blue;
  height: 200px;
  flex: 1;
}
<div class="contact-container">
  <div class="info-section">
    <div class="heading">Heading</div>
    <div class="content">
      <p>Lorizzle ipsum dolizzle stuff amizzle, shizznit adipiscing elit. Nullizzle sapien velizzle, mofo volutpizzle, suscipit quis, gravida bizzle.</p>
    </div>
    <div class="social">
      <img src="https://image.flaticon.com/teams/slug/smashicons.jpg" width="40px">
      <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" width="40px">
      <img src="http://freedesignfile.com/upload/2017/04/Summer-holiday-vector-icon.jpg" width="40px">
      <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" width="40px">
    </div>
  </div>
  <div class="map-section">
  </div>
</div>

Upvotes: 0

Related Questions