Modal Auto Adjust Height to Fit Content

Hi everyone,

I have change the default design of the modal so that it won’t occupy the whole screen.

I have a lot of issues with it:

  1. How do I make it adjust its height and width automatically when displayed in different devices?
  2. How do I make the height adjust according to its content.

This is my HTML code:

<ion-content class="content-modal">

	<div class="inset-modal">

		<ion-toolbar color="custom">

	            Transfer Funds

	        <ion-buttons end>
			    <button ion-button icon-only>
			        <ion-icon name="close"></ion-icon>


	    <div padding>

		    <form [formGroup]="transferFundsForm">

		    	<ion-list radio-group formControlName="transfer_to" class="radio-group">
			  		<ion-label stacked>Transfer To</ion-label>
				    <ion-item class="radio-style1">
				    	<ion-radio value="savings"></ion-radio>

				    <ion-item class="radio-style2">
				    	<ion-label>Another Wallet</ion-label>
				    	<ion-radio value="wallet"></ion-radio>

				<ion-item class="input-style">
					<ion-label stacked>Amount</ion-label>
				    <ion-input type="number" name="amount" formControlName="amount"></ion-input>

			  	<div class="error-msg" *ngIf="transferFundsForm.get('amount').hasError('required') && transferFundsForm.get('amount').touched">Amount is required!</div>
		  		<div class="error-msg" *ngIf="transferFundsForm.get('amount').hasError('min') && transferFundsForm.get('amount').touched">Amount must be greater than 0!</div>






  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
.inset-modal {
  background-color: #fff;
  position: absolute;
  width: 350px;
  height: 450px;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

Thank you!