CODEWITHSUNDEEP
htmlcss
KiprasT
KiprasT

Reputation: 395

Flexbox children height follow specific children

I was wondering if it's possible to make all flexbox children to follow the height of a specific child and hide their overflow if needed? The specific child should grow depending on it's content.

So this is the current situation:

enter image description here

And this is what I want (I specified the height for the image):

enter image description here

So is it possible to achieve this without js and without specifying height of any containers explicitly?

Upvotes: 0

Views: 51

Answers (1)

C3roe
C3roe

Reputation: 96250

You could just position the red element absolute. (Not sure how well that would work within a flexbox setting, but then again maybe it doesn’t need flexbox this way?)

Hide the overflow of the parent container (the size of which will be determined by the blue element left in normal flow.)

.container {
  position: relative;
  border: 1px solid #000;
  overflow: hidden;
}

.red-child {
  position: absolute;
  top: 0;
  width: 20%;
  background: red;
}

.blue-child {
  margin-left: 20%;
  width: 80%;
  background: blue;
}
<div class="container">
  <div class="red-child">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="blue-child">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

Or position at top:0 and bottom:0, and then hide the overflow of the element itself.

.container {
  position: relative;
  border: 1px solid #000;
}

.red-child {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 20%;
  background: red;
}

.blue-child {
  margin-left: 20%;
  width: 80%;
  background: blue;
}
<div class="container">
  <div class="red-child">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="blue-child">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

Upvotes: 1

Related Questions