Having trouble getting Flex 1:1 to function properly in conjunction with the Ionic grid. Looking to evenly allocate space using a 50:50 ratio

.scss

.content {
    ion-grid {
        height: 100% !important;
    }
    .row1 {
        flex: 1 !important;
    }
    .row2 {
        flex: 1 !important;
    }
}

.html

<ion-content class="content">
  <ion-grid>
    <ion-row class="row1">
      <ion-col size="12">
          S-Works Venge Disc – SRAM eTAP
      </ion-col>
    </ion-row>
    <ion-row class="row2">
      <ion-col size="12">
        <ion-row>
          <ion-col size="12">
            S-Works Venge Disc – SRAM eTAP
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            Availability : Upon Request
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            About
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            We aren't satisfied with second fastest. Hello, why do you think we have our own Win Tunnel and the motto,
            "Aero is Everything?" We live and breathe aero, because we know that aerodynamic optimization is the best
            thing we can do to make you faster. And this philosophy has never been truer than with the new Venge. Being
            eight seconds faster than the ViAS, it’s not only the most aerodynamic bike on the road, but it’s also lost
            460 grams. And now with SRAM RED eTAP, you’re definitively looking at the new shape of speed.
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Here is the end result:

https://i.sstatic.net/cXdSc.png

Question: Why am I unable to achieve equal space allocation with the design above using 50:50?

htmlcssangularflexboxionic4

Answer №1

When using the flex: 1 property, it is essential for its parent element to have the display: flex property set. Typically, the display: flex property organizes its children in a row layout. In this particular case, we needed to adjust the layout direction to column.

ion-grid {
    display: flex;
    flex-direction: column;
    height: 100% !important;
}

Answer №2

From my observation, it appears that the issue lies with the shorthand flex: 1. Shorthands for flex properties can sometimes be problematic across different browsers.

Although I am unable to test my solution currently, my approach would involve:

.row1,
.row2 {
  flex-basis: 0;
  flex-grow: 1;
}

This method ensures that both elements will begin with a height: 0, and the flex grow property will distribute the remaining space equally between the two rows.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

htmlangulartypescriptcomponents

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

javascripthtmlcssiframecross-domain

Displaying a sneak peek of the desired image file for upload on the site

Is there a way to display a preview of the selected image before uploading it on the website? I am looking for a method where users can see the chosen file immediately after selecting it from their system. Can this be accomplished using HTML and jQuery? ...

jqueryhtmlfile-uploadpreview

What are some best practices for integrating ES2020 into an Angular project?

Below is the content of my tsconfig.json file: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap&q ...

angulartypescriptecmascript-nextecmascript-2020

Which should I use - Angular directive or CSS selector, for better performance?

Currently expanding my knowledge on angular and exploring the capabilities of the ngClass directive. I have come across this interesting functionality: <li ng-repeat="language in languages" ng-class="{line:$even}">{{language}}</li> Alternativ ...

cssangularjs

Obtain HTML element properties from a webpage using the Selenium tool in Python

The task at hand is to extract the pink email information from the webpage, while ensuring the confidentiality of the black/blue data. The process will be carried out using Python 3.6. ...

htmlseleniumxpathwebdriverwait

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

Tips and tricks for displaying JSON data in Angular 2.4.10

In my Angular project, I am facing an issue while trying to display specific JSON data instead of the entire JSON object. Scenario 1 : import { Component, OnInit } from '@angular/core'; import { HttpService } from 'app/http.service'; ...

javascriptjsonangulartypescript

Integrating JSON back into the system

As I work with Axios to retrieve information from an API, I am able to successfully connect and receive an object with the necessary data. However, I am struggling to display this JSON data in my HTML code. Here is the code snippet I am using: <body&g ...

javascripthtmljsonaxios

jQuery: Locate and eliminate any images in the text that appear after a specific group of tags if no images are present

Currently, I am in the process of developing a feed reader specifically designed to parse the Google News Feed. You can view and test the code on this Fiddle. My main challenge lies in removing titles and sources from the descriptions. Through my explorati ...

javascriptjqueryhtmljsonrss

Transferring data to .NET using Angular's POST method

I am encountering an issue when trying to send parameters to the .net side as they are coming back as undefined. The main problem I am facing is that I have two post methods with the same parameters, so I attempted to send a string along with the other one ...

angular

How can I prevent the div from occupying space using CSS?

Below is the CSS that I am currently using. I am a beginner when it comes to CSS. I want to add a property to the CSS that will make the div take up only the necessary width, not more. For example, even if the text within the div is short (like "hi"), se ...

stylesheethtml

Do we really need Renderer2 in Angular?

Angular utilizes the Renderer2 class to manipulate our view, acting as a protective shield between Angular and the DOM, making it possible for us to modify elements without directly interacting with the DOM ourselves. ElementRef provides another way to al ...

javascriptangulartypescript

Resizing input fields with Bootstrap 4

Is there a way to make form elements stretch to the whole row width in Bootstrap 4? The current arrangement looks quite messy: http://prntscr.com/id6pfm Here is the HTML: <div class="jumbotron vertical-center"> <div class="container-flu ...

htmlcsstwitter-bootstrapbootstrap-4

The selector By.PARTIAL_LINK_TEXT in Selenium is failing to meet the expected condition

I am trying to store the friend list of a Facebook ID. When I click on the Friends tab on the profile, the friend list should be opened if it's not blocked; otherwise, something else should open. To determine if the friend list is opened or blocked, ...

cssfacebookselenium

Excess padding in Internet Explorer 7 when a table is nested within a div tag

I have exhausted all potential solutions found on the internet and still cannot seem to solve this issue. Here is an example page that highlights the problem: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/l ...

htmlcssinternet-explorer-7

CSS hack for older versions of Internet Explorer (ie6, ie7, and ie8)

Is there a way to selectively hide a single line of CSS from Internet Explorer 6, 7, and 8 so that they do not display that line? I am looking for a method to conceal the start and end of a media query specifically for those browsers so that they only see ...

cssresponsive-design

Error TS2339: The attribute 'scope' is not found in the 'JwtPayload' data type

Encountering an error in my IntelliJ IDE while trying to utilize decodedJwt.scope. The specific error message reads: Property 'scope' is not available on type 'JwtPayload'. Suggestions offered by IntelliJ include: sub, aud, exp, iat, ...

angulartypescriptjwtnpm-package

Ways to trigger a click event on a dynamically added class utilizing $(this);

I am attempting to retrieve the text when clicking on dynamically appended HTML elements. After some research, I came across the following code snippet: $(document).on('click', '.myClass', function (). However, it seems to work only f ...

jqueryhtml

Modify the appearance of a specific <td> element using JavaScript to change its color

I am working on creating a quiz using HTML, displayed in a table format. Upon verification, I want to highlight the correct choice (which is represented by a <td> tag) in green, and the incorrect choice in red using the background property. Is there ...

javascripthtml