9

If .right item stretch height to any size, how to make .item elements inside .left to fill vertical space equally?

From: enter image description here

To: enter image description here

.container { display: flex; background: #ccc; } .left { flex: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; height: 100%; } .right { flex: 1; border: 1px solid #000; } .item { border: 1px solid #000; flex: 1 0 100%; align-self: stretch; }
<div class="container"> <div class="left"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> <div class="right"> 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>

https://jsfiddle.net/d7o58kaj/1/

Improve this question

3 Answers 3

Reset to default
12

An initial setting of a flex container is align-content: stretch.

That means that flex lines will equally share all available space in the container along the cross axis. (A similar effect to flex: 1 on all items on the main axis.)

However, when you define a height for a flex item when the cross axis is vertical, or width, when the cross axis is horizontal, you override the align-content default.

In your row-direction container, the cross axis is vertical. So if you remove height: 100%, that allows align-content: stretch to work.

Learn more about flex alignment on the cross axis here:

Learn more about flex alignment on the main axis here:

.container { display: flex; background: #ccc; } .left { flex: 2; display: flex; flex-wrap: wrap; /* <--- this brings align-content into play */ /* flex-direction: row; <--- default setting; can be omitted */ /* align-items: stretch; <--- default setting; can be omitted */ /* height: 100%; */ } .right { flex: 1; border: 1px solid #000; } .item { border: 1px solid #000; flex: 1 0 100%; align-self: stretch; }
<div class="container"> <div class="left"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <div class="right"> 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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

Removed height: 100% from .left

.container { display: flex; background: #ccc; } .left { flex: 2; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; } .right { flex: 1; border: 1px solid #000; } .item { border: 1px solid #000; flex: 1 0 100%; align-self: stretch; }
<div class="container"> <div class="left"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> <div class="right"> 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>

Improve this answer

1 Comment

Explain why this works, as just drop a code is pretty useless
0

You can use flex property

 align-items: stretch ;

for achieving this.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.