CODEWITHSUNDEEP
htmlcssflexbox
user3615045
user3615045

Reputation: 203

Flex cuts off child items

I have the following code structure

.parent {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}
.container {
  border: 1px solid;
  display: flex;
  flex-direction:column;
  margin:20px;
}
<div class="parent">
  <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
  <div class="content">
  </div>
  <div class="footer">
    <div class="container">
       <div><button>Button1</button><div>
       <div><button>Button2</button><div>
    </div>
  </div>
</div>

What I want is the footer to occupy its original width and height(height: 144px) , and make the content scrollable based on the available space according to screen resolution.Currently, the footer is getting cut off on some screens. I've tried changing the flex values for content and footer, but it doesn't work.Thanks

Upvotes: 0

Views: 2449

Answers (2)

Pete
Pete

Reputation: 58462

If you want to limit your parent to the height of the screen so the footer is always visible, you need to set a height of 100% on your div (and body and html) and also move the image inside your content container (or have a seperate one that will scroll if it too large for the screen)

body,
html {
  margin: 0;
  height: 100%;
}

.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

img {
  display:block;
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}

.container {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  margin: 20px;
}
<div class="parent">
  <div class="content">
    <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
  </div>
  <div class="footer">
    <div class="container">
      <div><button> Button1 </button></div>
      <div><button> Button2 </button></div>
    </div>
  </div>
</div>

Upvotes: 2

Chris Halley
Chris Halley

Reputation: 57

I think setting your parent height to 100vh and giving your footer a fixed height should fix it:

https://codepen.io/chrishalley/pen/zbwRMw

    body {
  margin: 0;  
}

.parent {
  display:flex;
  flex-direction:column;
  background-color: orangered;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: scroll;
}

img {
  width: 300px;
}

.footer {
  height: 144px;
}

Upvotes: 0

Related Questions