CODEWITHSUNDEEP
cssoverflowflexbox
petsk
petsk

Reputation: 414

Flexbox overflow hidden

How can I achieve overflow hidden when using flexbox instead of floats?

My flex example on codepen: using flexbox

My float example on codepen, this is what I want but with flexbox: using floats

Upvotes: 2

Views: 3448

Answers (1)

Paulie_D
Paulie_D

Reputation: 115011

The problem is that flexbox will make the columns equal height or at least the largest will take precedence when expanding the parent.

So, we need to collapse the left div by effectively removing the content..and the easiest method for that is position:absolute.

So we wrap the content in an extra element inside the left div and position it as mentioned...then allow overflow scrolling as required.

img {
  max-width: 100%;
}
.container {
  display: flex;
  width: 400px;
  border: 5px solid blue;
}
.thumbs {
  display: flex;
  flex-direction: column;
  flex: 1 0 26%;
  border: 10px solid green;
  position: relative;
  overflow-Y: auto;
}
.wrap {
  position: absolute;
  top: 0;
}
.large {
  flex: 1 1 auto;
  border: 10px solid red;
}
<div class="container">
  <div class="thumbs">
    <div class="wrap">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-5.jpg">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-4.jpg">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
      <img src="http://lorempixel.com/image_output/food-q-c-700-700-9.jpg">
    </div>

  </div>
  <div class="large">
    <img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
  </div>
</div>

Upvotes: 1

Related Questions