Is there a way to adjust the width of the first flex column so that it only takes up the space of its content?
.flex {
display: flex;
}
.inside {
flex: 1;
border: 1px solid #000;
}<div class="flex">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">Right</div>
</div>http://codepen.io/anon/pen/rrKkOW
Even with width: auto, I'm unable to achieve the desired result. It would be great to have something like flex-basis: content.
Avoid assigning flex:1 to that column because it will expand to occupy all available space.
Instead, leave the flex value empty and it will default to width:auto.
.flex {
display: flex;
}
.inside {
border: 1px solid #000;
}
.inside-right {
flex: 1;
background:#c0ffee;
}<div class="flex">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">RIght</div>
</div>
<div class="flex">
<div class="inside inside-left">Left Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>
<div class="flex">
<div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>UPDATE: The original goal was to have each "left" element be sized equally.
Flexbox does not offer this capability, but it can be achieved with CSS Tables.
.row {
display: table-row;
}
.inside {
display: table-cell;
border: 1px solid grey;
}
.inside-left {
background: lightgreen;
}<div class="row">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">RIght</div>
</div>
<div class="row">
<div class="inside inside-left">Left Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIght</div>
</div>
<div class="row">
<div class="inside inside-left">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
<div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>To achieve the desired layout, you will need to make some adjustments to your HTML structure:
.flex {
display: flex;
}
.inside {
border: 1px solid #000;
}
.flex-grow {
flex: 1;
}
.inside-right {
background:#c0ffee;
}<div class="flex">
<div>
<div class="inside">Left</div>
<div class="inside">Left Left Left LeftLeft Left</div>
<div class="inside">Left Left Left LeftLeft LeftLeft Left Left LeftLeft Left</div>
</div>
<div class="flex-grow">
<div class="inside inside-right">Right</div>
<div class="inside inside-right">RIghtRIghtRIght RIght</div>
<div class="inside inside-right">RIghtRIghtRIght RIghtRIghtRIght</div>
</div>
</div>To ensure that each column's width matches its content, consider using the align-items property with a value of flex-start. For more information, you can refer to this link.
In the present day, the use of width: fit-content; has become quite common and widely supported according to various sources, making it a simple solution for setting the content width.
.flex {
display: flex;
}
.inside {
border: 1px solid #000;
}
.inside-left {
width: fit-content;
}
.inside-right {
flex: 1;
}<div class="flex">
<div class="inside inside-left">Left</div>
<div class="inside inside-right">Right</div>
</div>My content is overlapping the navbar on certain screen sizes, and I'm not sure why. Any ideas on how to fix this issue? Would wrapping everything in a container help? Currently using bootstrap v5.3.0-alpha1. Additionally, when I have a collapsed nav ...
Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. An ...
I created a div named "commentbox" and I want to apply a border with the color #ccc. However, I only want the left, top, and bottom sides of the div to be bordered, leaving the right side untouched. Thank you! ...
My goal is to show a different image to users on mobile devices using only CSS, as I am unable to access the HTML code. On mobile, I used display:none for the header-logo-image img { and then added a background-url to the div to successfully display my alt ...
Is there a way for flex items to expand in width but only in height when necessary? I enjoy using flexbox, but I find it frustrating that all flex items in a row grow to the same height even when there isn't enough content to fill them, resulting in a ...
Recently, I have encountered an issue that perplexes me - I am unable to debug less code in my meteor app when the twbs:boostrap package is present. Interestingly, everything works fine when I remove it, but as soon as I add it back, the CSS seems to be co ...
https://i.sstatic.net/iuNB7.png <span id="priority-dot-open-menu"> <span id="priority-menu"> <span class="tooltip-top"></span> <span id="priority-dot-blue">& ...
doc.html .column { background-color: orange; width: 75%; vertical-align: top; display: inline-block; height: 200px; } .nav { vertical-align: top; display: inline-block; width: 25%; background-color: lightgreen; height: 200px; } * { ...
I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...
Currently, I have 4 divs grouped under the class "menubut." I am attempting to create a small overlay that appears when hovering over the menubut classes. Additionally, I want another div called "red" to show up about one-tenth of the size of the menubut ...
I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...
How can I use flex boxes in CSS to ensure that from a min-width of 769px to 1025px, the third figure is displayed on a new line while the first and second figures remain on the top line taking up equal space? <div class="mid-col-section-2"> <figu ...
Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...
I am currently working on creating a website that features an image gallery. When a user clicks on a thumbnail, I want a hidden div to slide out and display more information about the image, possibly even including a slideshow. After extensive searching o ...
Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...
Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...
It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...
Is it possible to seamlessly combine Python code with HTML/CSS/JS to develop desktop applications? For instance, I want to create a function in Python that displays "Hello World!" and design a visually appealing user interface using HTML/CSS/JS. How can I ...
I have my own blog website: Essentially, what I am aiming for is When a user clicks on the search button, a floating semi-transparent textarea window should appear inside the designated rectangle area (as shown in the image, that red orange rectangle). ...
My HTML table is as simple as it gets: <table class="dispdtab"> <tr> <td><b>Dealer: </b></td> <td>dealername</td> </tr> <t ...