CODEWITHSUNDEEP
cssflexbox
user10963024
user10963024

Reputation:

CSS - flex grow height and enable overflow

Problem: Cannot enable overflow on a flex grow child.

Example:

How do I enable div 2.1 to grow to the size of Div 2 but also enable overflow?

HTML

<div class="container">
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>
 </div>
 <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
        <p> "Fill parent" </p>
        <p> "Content" </p>        
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "This content should be in the overflow" </p>
    </div>
 </div>
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>      
 </div>    
</div>

CSS

.container {
    height: 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
}
.flex-fitcontents {
    flex: 0 1 auto;
    background-color: blue;
}
.flex-fillremaining {
    position: relative;
    flex: 1 1 auto;
    background-color: red;
}
.flex-fillparent {
    flex: 1 1 auto;
    background-color: green;
    overflow: auto;
}

JS Fiddle

Upvotes: 1

Views: 2923

Answers (2)

user2560539
user2560539

Reputation:

If i understood correctly, you mean something like in the following example. Setting height in flex-fillparent solves the problem.

.container {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.flex-fitcontents {
  flex: 0 1 auto;
  background-color: blue;
}

.flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
}

.flex-fillparent {
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;
  height: 3rem;
}
<div class="container">
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
  <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
      <p> "Fill parent" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "This content should be in the overflow" </p>
    </div>
  </div>
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
</div>

Upvotes: 1

vishnu sandhireddy
vishnu sandhireddy

Reputation: 1176

You can try adding overflow auto to flex-fillremaining, so that its children have a scroll bar.

.flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
  overflow: auto;
}

Upvotes: 0

Related Questions