CODEWITHSUNDEEP
htmlcssflexbox
David Hauck
David Hauck

Reputation: 269

flex in a row, but have elements fill parent's height

I have a layout that looks something like this:

<div style="display: flex; flex-direction: row;height:100%;">
  <div style="width:250px"></div>
  <div style="flex:1;height:100%"></div>
</div>

The second inner div grows vertically, so I need that div to scroll (but not the left inner div). This works great on Firefox, but on Chrome the second inner div wraps to the height of the content and keeps growing off the screen. From what I can tell, this is because in Chrome height 100% only works if the parent has a defined height.

How can I make the second inner div flex fill the width and also match the height of the parent?

Upvotes: 0

Views: 280

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.container > div:first-child {
  flex: 0 0 250px;
  align-self: flex-start;
  background-color: aqua;
}

.container > div:last-child {
  flex: 1;
  overflow: auto;
  background-color: pink;
}

body {
  margin: 0;
}
<div class="container">
  <div>Item One</div>
  <div>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>Item Two<br>
  </div>
</div>

Upvotes: 0

Related Questions