I've been struggling with a project that uses a flexbox to hold four columns. Here's the layout:

Code:
+------------------+-------+-------+-----------------+
| +--------------+ | fixed | fixed | fixed px        |
| |variable-width| |   px  |   px  | width           |
| |   content    | | width | width | (three possible |
| +--------------+ |       |       | values)         |
+------------------+-------+-------+-----------------+
A simplified version of its HTML looks like this:
Code:
<div class="flex-outer">
    <div class="flex-inner">
        <div class="variable-content">
            Potentially very wide content
        </div>
    </div>
    <div class="flex-inner" style="width: 16px; background-color: #f00;">
    </div>
    <div class="flex-inner" style="width: 16px; background-color: #0f0;">
    </div>
    <div class="flex-inner" style="width: 100px;">
        Content here too.
    </div>
</div>
And the CSS:
Code:
.flex-outer {
   width: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: space-between;
   justify-content: space-between;
}

.flex-inner {
}
.variable_content {
   max-width: 100%;
}
My current problem is that when the contents of the variable_content box are very wide, it pushes the last three columns to be tiny. When they are very narrow, there's a huge amount of whitespace. I want the final three columns to take exactly their fixed px width, and the first column to take exactly the remaining width of its container, even if its content is narrower or wider than that available space. What shall I do?

Edit: Because all the cool kids do it, a jsFiddle for this: https://jsfiddle.net/m68h90fv/
For starters, don't use px (or inline styling Sad ). This is a flexible web-layouts worst nightmare.

On the flex-box issue, you need the flex-grow, flex-shrink, and flex-basis properties to specify how individual boxes relate to one another. There is also a combined property called flex that is a shorthand to set them all.
elfprince13 wrote:
For starters, don't use px (or inline styling Sad ). This is a flexible web-layouts worst nightmare.
The red and blue columns have their px width set in the stylesheet; I was simplifying it for this. The final column has its px width set via jQuery.

Quote:
On the flex-box issue, you need the flex-grow, flex-shrink, and flex-basis properties to specify how individual boxes relate to one another. There is also a combined property called flex that is a shorthand to set them all.
I suspected that was the case, but from cursory experimentation, it wasn't clear to me that combinations of those properties could yield my desired result. I'll try further and post if I am successful.
Yes, but you should use something like rems to set an accessibility-friendly scaleable size, and not px. There's essentially no good reason to ever use px.
In this case, I fill those two columns with background images that are exactly that-number-of-px wide, which seems like a good reason to me. Is there a better solution?

To address what PT_ said in SAX: I could compute the correct size using jQuery on window resize (and I currently do). I'm trying to move away from using Javascript to compute layout.
I got the solution to the problem.

index.html


Code:

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      
      <title>SOMETHING</title>
      
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <div id="VarWBoxContainer">
         <div id="VarWidthBox" class="varwbox">This will automatically update its own size after changing its content</div>
      </div>
      <div id="box2" class="fixedbox">2</div>
      <div id="box3" class="fixedbox">3</div>
      <div id="box4" class="fixedbox">4</div>
   </body>
</html>


style.css


Code:

html
{
   background-color: white;
}

#VarWBoxContainer {
    display: inline-block;
    margin: 0px auto 10px auto;
}

.varwbox
{
   font-family: Verdana;
   border-top: 1px solid #000;
   border-left: 1px solid #000;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   padding: 5px;
   float: left;
}

.fixedbox
{
   font-family: Verdana;
   border-top: 1px solid #000;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   padding: 5px;
   float: left;
        width: 50px;
}


I hope this is what you are looking for. Copy the code of both files on the desktop and try it. See if it works. Smile
It's probably better to scale the images if somebody really wants to scale the page up for accessibility.
KKZiomek: Thank you! Unfortunately, my experience with floats is that when one gets too wide, it'll just float below its neighbors. Is that not the case? In addition, I want all of my columns to be the same height, which I believe flexboxes make trivial.

elfprince13: Sooo, define the image widths in relative units as well?
Yeah. width: "whatever rem that equates to correct number of pixels"; height:auto;

This will make the images scale with the rest of the page if the font size is increased.
@KermMartian: Yeah, I just noticed what you really meant. I was reading this post too quickly and didn't get what you were actually looking for. I was in a hurry.
For the curious, I solved this problem, and I hope my fix will help other people trying to solve the same problem. As you see, I updated the title of this topic to include "...With white-space: nowrap". I finally discovered that a big part of the problem was that my variable-width element contained several elements with white-space: nowrap. Googling issues with flexboxes and this attribute revealed more about how flexboxes work, which solved the problem. It seems that the flex-grow and flex-shrink attributes are applied only after the initial sizes of the flex children are computed. With white-space: no-wrap, these widths can already be huge, and there's nothing the flexbox can do about it. The solution I found is to set the variable-width element as width: 0. What?! I know, crazy, but since the remaining elements are fixed-width, the flexbox layout engine will then allow that element to flex-grow into the remaining space. Voila!

Web development is terrible.

Edit: For completeness, here's a MWE jsfiddle that shows my solution: https://jsfiddle.net/m68h90fv/2/
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement