CODEWITHSUNDEEP
htmlcssuser-interfaceflexbox
anshul
anshul

Reputation: 791

How can I shrink the height of a flex child to 50% only?

I am trying to have a UI like this :

enter image description here

This is how I have tried doing it :

enter image description here

  1. A div at the top as cover Image
  2. The next div containing two child divs as profile photo & UI details as -
<div>Image Cover photos<div>
<div style="display : flex;">
  <div>profile photo</div>
  <div>UI Details Card</div>
</div>
  1. Then I'm using the transform : translateY(-50%) to the profile photo div to move 50 percent of the portion on top of the background cover photo.
  2. This, however creates a problem, the UI details remains at the same place(which is ideal), but the baseline has been changed.I want it to have only 50% of the height, so the baseline matches with the profile photo as well, and also UI details wcard will have some text, I do not want it to overlap on the Cover Image background as well(as that of profile photo). How can I achieve this? enter image description here

Upvotes: 0

Views: 79

Answers (2)

A Haworth
A Haworth

Reputation: 36564

You can make a 2 column, 3 row grid and place items where you want them.

Here's a simple example:

.container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 30vw;
  height: 20vw;
}

.container :nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  background: red;
}

.container :nth-child(2) {
  grid-column: 1;
  grid-row: 2 / span 2;
  background: green;
}

.container :nth-child(3) {
  background: blue;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Obviously you will want to alter the relative sizes of the grid to suit your particular case.

Note: it depends on whether you want to put some text in the first item so that it comes directly above the second item or not as to whether you start the first div in the first column or the second column.

Upvotes: 1

creme332
creme332

Reputation: 1945

One way to solve this problem is to use CSS grid to place everything.

body {
  padding: 100px;
}

.card {
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(3, 1fr);
  outline: 1px solid;
}

.details {
  background-color: blanchedalmond;
  grid-area: 3/2/4/3;
}

.photo {
  background-color: aquamarine;
  grid-area: 2/1/4/2;
}

.cover {
  grid-area: 1/1/3/3;
  background-color: grey;
}

.cover img,
.photo img {
  height: 100%;
  width: 100%;
}
<div class="card">
  <div class="cover">
    <img src="https://source.unsplash.com/random/?1" alt="">
  </div>
  <div class="photo">
    <img src="https://source.unsplash.com/random/" alt="">
  </div>
  <div class="details">Details here</div>
</div>

Here's a diagram showing the different grid areas : Diagram of css grid

Notice the overlap region between the blue box (photo) and the red box (cover). Since the photo div appears after the cover div in the DOM, the photo div will have higher priority and will occupy this overlap region.

Upvotes: 1

Related Questions