When the parent container is given a specific height, the Flexbox item on iOS 9 appears to be shrunk down

Encountering a bug on iOS version 9 while using the latest Bootstrap 4 Beta. The issue involves a parent div and ul element with multiple list items. The parent div is a flexbox with set dimensions and overflow enabled for child elements. The list item should occupy 100% of the parent's height. Check out the demo code here: https://codepen.io/nguyenthai/pen/jawzRo.

Most browsers display correctly, but in iOS 9, Safari does not calculate the container's height properly, causing the list to shrink. While similar bugs have been resolved in iOS 10 and above, I require a solution for iOS 9 specifically. Workarounds like setting flex-shrink: 0; or flex: 1 0 auto; have not worked. Changing the list to display: block helps, but affects other browsers. Any suggestions for fixing this bug without altering syntax for other browsers?

cssflexboxios9twitter-bootstrap-4

Answer №1

By default, a flex item can shrink with flex-shrink: 1, and it seems that iOS9 also allows this behavior.

To prevent this, we can use flex-shrink: 0 on the li element.

Check out the updated codepen here

Stack snippet

.test {
  width: 400px;
  height: 500px;
  overflow: auto;
}
.list-group-item {
  flex-shrink: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test d-flex flex-column">
  <ul class="list-group h-100">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
<div>

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

Instructions on adding a class to every input element within a form using CakePHP

Is there a way to utilize the inputDefaults property in order to apply a consistent class across all input elements within my form? Additionally, could you provide a concise explanation of what exactly the inputDefaults entails? ...

phphtmlcsscakephp

Could you please review my PHP code? I encountered a syntax error: unexpected '}' character. Thank you

I encountered an issue in the final line <?php } ?> as it reports a syntax error, unexpected '}' <?php if (isset($_SESSION['u_id'])) { //echo "You are logged in!"; include_once 'database.php&apo ...

phphtmlcss

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

Automatically close an element when you click on a different element

Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the o ...

javascriptjqueryhtmlcss

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...

javascriptjqueryhtmlcss

Stop hyperlinks from wrapping on the navigation bar in Bootstrap 4

Is there a way to prevent the links in the navbar from breaking lines when zooming in? I want them to remain on the same line until the navbar collapses. In the example below (click to view full size), there are 6 links. When you zoom in, at a certain poi ...

csstwitter-bootstrapbootstrap-4

Styling a horizontal navigation bar with CSS: Using list items (`li`) versus div elements (`div`)

Is it more semantically correct to float li elements within a ul, or should we opt for floating divs inside an external 'outer' div? ...

css

What is the method for creating five columns in a single row using Bootstrap?

How can I make my columns responsive for all screen sizes? Currently, I have set the width to 20% for each column, but I would like it to adjust accordingly. Here is a link to the fiddle. Any help on making the row responsive with five columns would be gre ...

htmlcssflexboxtwitter-bootstrap-4

Page load triggers background color shift

Here is the structure of my markup: <div class="authentication"> <div class="form-inputs"></div> </div> My goal is to have the color of the authentication section slide down from top to bottom when the page loads. Initially, the ...

javascriptjqueryhtmlcss

When using position:sticky, the overflow:auto behavior may not function as intended

My Bootstrap table has the class "table-responsive," which automatically sets overflow-x to auto when the table is too wide for the screen. In addition, I've applied the class "sticky-top" to the th elements in order to make them sticky within the ta ...

htmlcssbootstrap-4

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

javascriptjqueryhtmlcssfirefox

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascriptcssreactjsreact-nativestyled-components

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

javascriptjqueryhtmlcss

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

javascripthtmlcssonclick

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

javascriptjquerycss

Achieving uniform height for child images within adaptable Bootstrap 4 columns. What's the secret?

I am looking to create 3 columns using Bootstrap 4 that will adjust their width dynamically while keeping the padding consistent. I also want to ensure that the height of each image in all three columns remains the same regardless of changes in page width. ...

flexboxbootstrap-4

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe