1

I have the code as follow. What I intend to acheive is to make the Content 1 of 33% of the screen height. It is obvious that it is not set to 33% screen height currently althought i set it to 33vh.

Plunkr: Click here

 <ion-content scroll="false" has-header="true" style="display: flex; flex-flow: column;height:100vh;">
        <div style="background-color: red; height: 33vh; ">
          Content 1 (I want this height to have 33% of screen height! Now is not 33% screen height)
        </div>
        <div style="background-color: yellow; display:flex;flex-direction:row; height: 100vh; ">
          <div style="flex:1;">
            content 2 part 1 (this is the remaining height after deducting content 1 and image)
          </div>
          <div style="flex:1;">
            Content 2 part 2 (this is the remaining height after deducting content 1 and image)
          </div>
        </div>
        <div>
          <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
        </div>
      </ion-content>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
vincentsty
  • 2,963
  • 7
  • 34
  • 51
  • An initial setting of a flex container is `flex-shrink: 1`. This means that, by default, flex items will be allowed to shrink past their initial size in order to fit inside the container. Disable this feature with `flex-shrink: 0` on items that should retain their defined width / height ([demo](https://plnkr.co/edit/qE1LEaPb5dLG5EOj2WWB?p=preview)). For a more complete explanation, see ***The `flex-shrink` factor*** section in the dupe. – Michael Benjamin Oct 10 '16 at 17:07

0 Answers0