Fit content in to flex direction column

Question

Im trying to fit content into a div with a flex. Works perfectly into a flex-direction:row; (Standar) but isen´t work into a flex-direction:column; In "column" just overflow my div, do not resize the elements inside.

How can i do to resize elemetns to fit into a div with out know cuantity of elemnts?

https://codepen.io/nandordena/pen/jObjJNw

HTML

<body>
<div class="column">
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
</div>

<div class="row">
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
  <div>
    <video src="https://www.w3schools.com/tags/movie.ogg">    
  </div>
</div>
</body>

CSS

div{
  border:solid 1px #f00;
  margin:1px;
  flex:1;
}
body{
  border:solid 1px #00f;
  pading:1px;
  display:flex;
  height: 500px;
  width: 500px;
}
.row{
  display:flex;
  flex-direction:row;
}
.column{
  display: flex;
  flex-direction:column;
}
video {
  max-height:100%;
  max-width:100%;
}

add min-height:0 to `div > div` – Temani Afif May 29 '20 at 09:38 — Temani Afif, May 29 '20 at 09:38
I fixit adding overflow:hidden; into a flex-row div – Fernando Moya Llasat May 29 '20 at 09:48 — Fernando Moya Llasat, May 29 '20 at 09:48

score 0 · Answer 1 · answered May 29 '20 at 09:39

0

Probably the easiest (not sure if a correct way), to let column grow and don't let it shrink. You can achieve this by adding flex: 1 0 auto; to your wrapper (.row > div)

answered May 29 '20 at 09:39

Lukas J.

196
1
11

score -1 · Answer 2 · answered May 29 '20 at 09:41

Grid can do the trick

.grd {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 50px;
}

.item1 {
  background-color: blue;
  width: 120px;
  grid-row: 1;
}

.item2 {
  background-color: pink;
  width: 1fr;
  grid-row: 1;
}

.item3 {
  background-color: red;
  width: 20px;
  grid-row: 1;
}

.item4 {
  background-color: darkblue;
  width: 1fr;
  grid-row: 1;
}

<div class="grd">
  <div class="item1">One</div>
  <div class="item2">Two</div>
  <div class="item3">Three</div>
  <div class="item4">Four</div>
</div>

Fit content in to flex direction column

2 Answers2

Linked