I am new to css, I have a slight problem, i have set up a site and have used a fixed size, but on the catalogue page i will need it to auto resize according to the content that will be placed in. Board Index ... 08, 2013 5:12 am. Whereas with auto-fill , the browser will allow empty columns to occupy space in the row like their non-empty neighbors — they will be allocated a fraction of the space even if they have no grid items in them, thus affecting the size/width of the latter. My solution was to create a hidden DIV with the same width, borders, margins, padding, font size, line height, etc. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width. If you’re using auto-fit, the content will stretch to fill the entire row width. If I reduce the height and width of the div, the chart is being truncated. So that if I widen my browser the buttons keep being on top of each other. ; Example 3: This example displays an image without using object-fit property. The fit-content behaves as fit-content(stretch).In practice this means that the box will use the available space, but never more than max-content.. Resize Divs Dynamically. Your solution has the benefit of not needing the auxiliary DIV. I’d call this a magic number. If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. Hi, How to resize the chart to fit into the div height and width. Hi, I am trying to get the DIV to automatically resize to fit extra content, so that I don't need to enter a fixed height on each page when there is extra text. We will use a few lines of JavaScript code to resize the div elements so that they share the same height on the page. Output: Note: Using object-fit: cover; will cut off the sides of the image, preserving the aspect ratio, and also filling in space. as the TEXTBOX, duplicate the content from the TEXTBOX into the DIV, and then measure the height of the DIV and apply that height to the TEXTBOX. For a website where the content is dynamic, we cannot set the height manually because we may not be aware of how much content will be placed within the div elements. CSS code: #main {height:auto; min-height:480px; Ben Morse That would be a solution, but I want my buttons to be on top of each other and not next to each other.. Thu May 10, 2018 9:59 am . To still equal the width of the DIV to the width of its content, we need to make it display:inline-block or display:table. The former has the disadvantage that we need to set its parent to text-align: center , while the latter can be centeed directly using margin: 0 auto . When used as laid out box size for width, height, min-width, min-height, max-width and max-height the maximum and minimum sizes refer to the content size. At the moment the text just runs over the fixed height of the div, Any help will be greatly appreciated. Skip to content. Resize chart according to div height and width. With your solution these buttons could be on top of each other on a mobile but not on a pc.. In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that.