Browser reports that the value "content" for flex-basis is not valid

Provided:

.layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.layout aside,
.layout main {
  min-width: 100px;
}

.layout aside {
  flex: 0 0 content;
  background-color: red;
}

.layout main {
  flex: 1 1 content;
  background-color: green;
}
<div class="layout">
  <aside>
    <p>Line 1</p>
  </aside>
  <main>
    <p>Line 1</p>
    <p>Line 2</p>
    <p>Line 3</p>
  </main>
</div>

Live example

My goals are:

  • Make the aside element expand to fit its content and keep a fixed width
  • Allow the main element to take up all remaining horizontal space
  • Ensure that both aside and main have equal height, whichever is greater

However, when inspecting the code in Chrome, I encounter errors with the flex: property for both elements.

Invalid property value

Additionally, the green box does not expand properly on the right. This issue occurs in Chrome version 56.0.2924.87 (64-bit) on Mac OS X 10.11.5.

What could be causing this problem?

htmlcssflexbox

Answer №1

content can be used as a flex-basis rule, however, it may not be fully supported by all web browsers at this time.

According to the specification:

content

It is important to note that some older implementations do not support the content value as it was not part of the original release of Flexible Box Layout. The same effect can be achieved by using auto in combination with an automatic main size (width or height).

For more information on the history of the content value, you can also refer to MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values

Answer №2

Instead, consider utilizing flex: 1 1 auto.

This is a condensed way to specify flex-grow, flex-shrink, and flex-basis properties sequentially.

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

`What is the best way to extract text and URLs from user input within a JSP page?`

I am having trouble with my programming skills while working on a web application using HTML and JSP pages. The goal of the application is to allow users to post content, but I am struggling to separate text from links within the textarea. Here is how the ...

htmljsp

When a cross-domain iframe is loaded in a private browser, it automatically logs the user out

I've been collaborating with a client to create a unique standalone website on a subdomain. They have requested that I utilize their API to initiate a straightforward post request when a user clicks a button. However, the client prefers the user to ut ...

javascripthtmljqueryiframe

Browse through the options in the dropdown list -Angular 6

I am looking to implement a filtering feature in my Angular app where data can be filtered based on the selected product number from a dropdown menu. The product data is structured in JSON format as shown below. component.ts productlistArray = [{ num ...

javascripthtmljsonangular

What could be preventing me from typing in the input field that's linked to an Angular model in Firefox browser?

Having trouble entering text in input on Firefox, even though it works fine on Chrome. No CSS issues or jQuery used. Here is my HTML code: <div class="todo_content" style="width:66%"> <input class="todo_add_input" autofocus="autofocus" ...

angularjshtmlfirefox

Internet Explorer fails to load stylesheets for elements loaded with .load() and JavaScript functionality is also disabled

I'm using the .load() function to load my content, as shown in this code: $(document).ready(function(){ $("nav a").click(function () { $("#main-content").load($(this).attr("href") + " #content > *"); return false; }); }); The sty ...

jquerycssinternet-explorer

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

I am looking to create a set of divs that are centered on the page and adjust in size according to the length of the username. .Container1 { display: table; width: 100%; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: bor ...

javascripthtmlasp.netcss

I'm having trouble centering divs with Bootstrap

Currently, I am utilizing MVC5 with the Razor view engine and Bootstrap. I am facing an issue where I am trying to center some images, but I am running into difficulties. Oddly enough, when I include the Bootstrap.css file, the centering does not work as ...

csstwitter-bootstrapcenter

Integrating C code into an HTML webpage

My C code includes #include <stdio.h> and I want to display it on a webpage using the pre and code tags. However, the angle brackets are disappearing in the output. #include stdio.h Is there a way to show the stdio.h with the angle brackets intac ...

htmlc

Is there a way to shift a background image pattern?

After searching extensively, I came up empty-handed and am seeking guidance on how to achieve a specific effect. Specifically, I am in need of a JavaScript or jQuery script that can smoothly shift a background image to the right within a designated div con ...

javascriptjqueryhtmlcss

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

javascriptangularjscsstwitter-bootstrap-3hover

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

Developing a unique dark theme for bootstrap without the need for redundant CSS coding

Currently, I am exploring the most effective way to structure my SCSS dark theme for optimal maintainability. Bootstrap 5 offers the option of setting the data-bs-theme='dark' attribute on the HTML body tag to switch between light and dark themes ...

csstwitter-bootstrapbootstrap-4bootstrap-5ruby-on-rails-7

Ensuring the continuous transmission of data frames is essential for WebSocket communication

Our system utilizes websocket technology to transmit user activity events such as clicks, mouse movement, scroll, input, and more. In addition to these events, we also send a snapshot of the HTML DOM. On average, the size of the HTML snapshot is approximat ...

javascripthtmlwebsocket

What is the best way to generate a box when a button is pushed?

How can I make a button create a box with text inside it when clicked? <div class="trades"> </div> <button onclick="create()">add</button> Here is the JavaScript function to create the box: function create() { var box = docu ...

javascripthtmldom

Manage the placement of elements using CSS

Having an issue here. The blue-colored elements are showing up vertically, but I want them to be displayed horizontally. I've tried various methods but haven't been able to solve the problem. Providing just the code for the items below due to len ...

htmlcss

Using JQuery to adjust the image width to 100% when the height is greater than the width

Currently, I am working on developing a custom WordPress theme and here is the code snippet that I have been using: <div class="post-thumb"> <?php echo get_the_post_thumbnail(); ?> </div> I am facing an issue where I need to adjust the ...

javascriptjqueryhtmlcsswordpress

Alignment issues with images

I am trying to put together a collection of images that function as links and light up when hovered over. However, my attempt to add a <div class="hover"> in front of each image caused them to no longer display in a horizontal line. How can I resolve ...

htmlcss

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular

Tips for altering the selected color of a checkbox?

I'm trying to change the color of my checked checkbox to green and also adjust the size, but for some reason, only the size is changing in my code. I even attempted using `:checked:after` without success. input[type='checkbox']{ width: 1 ...

csssass

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

I'm working with a table that includes 4 fields: service, amount, tax, and action. My challenge is to have the data from any row in the first table added to a second table when its checkbox is selected. The second table should have the same fields a ...

javascriptjqueryhtml