3

I want one of the children of the display: flex; to adjust the height to the others. If the content in this children is bigger than the other children's, then overflow: scroll; should be done to this content.

In other words: I expect the middle div (yellow background) from the following code to adjust its height to the others div's with overflow of .tabl.

I know that the question is like many others. I have already read many threads and I still have not managed to solve the problem. I apologize for this post, but I do not have the strength to solve it.

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: scroll;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>
  
  <div class="child2">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Sokołow
  • 521
  • 5
  • 18

4 Answers4

1

I want one of the children of the display: flex; to adjust the height to the others.

Suppose you want the green section (child3) to have the largest height:

  • make sure you have align-items: stretch (its the default, so don't override it) - this ensures that each row flex child stretches to the maximum height flex child.
  • wrap the contents of the other sections (child1 and child2) into an absolutely positioned element.
  • make this wrapper element a column flexbox to get the overflow right on the yellow section.

See demo below:

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
  <div class="child-wrap">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p></div>
  </div>
  
  <div class="child2">
  <div class="child-wrap">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

Suppose you want either of the left or right sections to have the maximum height - in that case use the above absolute positioning only for the middle yellow element - see demo below where the highest of the left or right elements define the height of the whole parent wrapper :

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>

  <div class="child2">
    <div class="child-wrap">
      <div class="info">
        <h2>Element</h2>
      </div>
      <div class="tabl">
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
      </div>
      <div class="footer">
        <button class="btn">Some button</button>
      </div>
    </div>
  </div>

  <div class="child3">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>

  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Unfortunately, the last div (green) will not be the highest (it will not necessarily be the highest). Sometimes the first div (red) can be the highest - then the middle (yellow) height should also be adjusted to the highest one. – Sokołow Mar 18 '19 at 14:41
  • so use absolute positioning *only* for the *yellow middle element* - I guess that will work out in that case... try it out - see the updated answer... – kukkuz Mar 18 '19 at 14:47
  • 1
    Ok, it's a very good idea :) I was hoping to use only flexbox for this purpose, but this solution works perfectly. – Sokołow Mar 18 '19 at 15:00
0

Overflow in this context means nothing without defining a height after which the content should flow over. The problem (or benefit, in most cases) with flex is the boxes will grow to match the "biggest" content, or rather flex (hence the name). You'll probably need Javascript for this, or you'll need to define a max-height on the children.

Below is an example of your code with a max-height applied to children;

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: scroll;
}

.child1, .child2, .child3{
  max-height: 250px;
  overflow: auto;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>
  
  <div class="child2">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>
Lewis
  • 3,479
  • 25
  • 40
  • 1
    The view must be... flexible. :) I can not set the maximum height in any place. Sometimes, the elements on the left or right may be higher than the middle ones. – Sokołow Mar 18 '19 at 14:43
0

If you know the desired height of your flex children in advance, using the max-height property is the cleanest solution provided natively by Flexbox, as @Lewis suggested.

Should you need more fine-grained control, consider using the CSS Grid layout module. If you swap out your existing code with the snippet below and apply it to your markup, you can see a minimalist reproduction of the layout you're trying to achieve.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
}

.parent > * {
  border: 2px solid black; // added for clarity
  grid-row-start: 1;
  grid-row-end: 4;
}

.child2 {
  overflow-y: scroll;
}
A. Lamansky
  • 284
  • 2
  • 7
0

You set your .parent an heigh of for example max-height: 150px;

bill.gates
  • 14,145
  • 3
  • 19
  • 47