How to keep flex box items widths independent of its content

问题

I have a flex box layout consisting of a lots of div blocks with various amount of text inside. Is there a way to keep the widths of these blocks the same regardless of the amount of text they contain? If the text doesn't fit inside its box, it's perfectly fine if it gets scrollable or just clipped.

I know I can set min-width and max-width the same but I want to have bigger boxes (to some extent) if the page size permits, so this is not an option.

You can resize my example and see that the column containing the box with lots of text tends to get wider than the rest. Resize it e.g to a narrow two-column layout. How do you keep the boxes at equal widths and still allow them to grow and shrink? And with flex-direction column.

This is just a simplified demonstration of a part of a data driven application, I'm aiming for a solution that is as general as possible.

Any help much appreciated…

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Flextest</title>

   <style>
      body
      {
      }

      .wrapper
      {
         background-color: #eee;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         border: 2px solid green;
      }

      .el
      {
         border: 2px solid black;
         color: darkgray;
         padding: 10px;
         flex-grow: 1;
         flex-shrink: 1;
         margin: 1vh;

         min-width: 100px;
         max-width: 300px;
         min-height: 200px;
         max-height: 200px;
      }
   </style>

   <script>
      function init()
      {
         window.addEventListener("resize", function (evt) { onresize(evt); }, false);
         onresize(null);
      }

      function onresize(evt)
      {
         var height = Number(document.body.parentNode.clientHeight);
         document.getElementById("size").innerText = height;
         document.getElementById("wrapper").style.height = (height - 20) + "px";
      }

   </script>

</head>
<body onload="init()">

      <div class="wrapper" id="wrapper">
         <div class="el" id="size">One</div>
         <div class="el">Two</div>
         <div class="el">Three</div>
         <div class="el">Four</div>
         <div class="el">Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text </div>
         <div class="el">Six</div>
         <div class="el">Seven</div>
         <div class="el">Eight</div>
      </div>

   </body>
</html>

回答1:

You could put the text inside a textarea tag. This will give the flex items the same width regardless if they contain any text or not. It's not an ideal solution as you can't format the text as freely as you can outside a textarea tag, i.e as in a div tag e.g. I wish I had an explanation why the flex layouts behaves so differently (with or without textareas), but I haven't. At least the behaviour is consistent in Edge, Chrome and Firefox.

The benefits of using a flexbox layout like this is that it adapts very well to different aspect ratios like portrait/landscape on a tablet e.g, while at the same time it's fixed in response the different amount of text content. Ideal for a database driven form e.g, where some fields/textareas might be empty, and some not.

This is example is of course just a sketch or proof of concept, in a typical database driven form you probably have a some text input fields/tags as well as image elements of different heights.

Here's the code for anyone wanting to compare it with the original code.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Flextest</title>

   <style>
      body
      {
      }

      .wrapper
      {
         background-color: #eee;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         border: 2px solid green;
      }

      .el
      {
         border: 2px solid black;
         color: darkgray;
         padding: 10px;
         flex-grow: 1;
         flex-shrink: 1;
         margin: 1vh;

         min-width: 100px;
         max-width: 300px;
         min-height: 200px;
         max-height: 200px;
      }

      textarea
      {
         width: calc(100% - 6px);
         /*height: calc(100% - 6px);*/
         height: 194px; /*Calculated height doesn't work in chrome */
      }
   </style>

   <script>
      function init()
      {
         window.addEventListener("resize", function (evt) { onresize(evt); }, false);
         onresize(null);
      }

      function onresize(evt)
      {
         var height = Number(document.body.parentNode.clientHeight);
         document.getElementById("size").innerText = height;
         document.getElementById("wrapper").style.height = (height - 20) + "px";
      }

   </script>

</head>
<body onload="init()">

   <div class="wrapper" id="wrapper">
      <div class="el"><textarea id="size">One</textarea></div>
      <div class="el"><textarea>Two</textarea></div>

      <div class="el"><textarea>Three</textarea></div>
      <div class="el"><textarea>Four</textarea></div>
      <div class="el"><textarea>Lots of text text text text text text text text text text<br />text text<br />text text text text text text text text text text text</textarea></div>
      <div class="el"><textarea>Six</textarea></div>
      <div class="el"><textarea>Seven</textarea></div>
      <div class="el"><textarea>Eight</textarea></div>
   </div>

   </body>
</html>

来源：https://stackoverflow.com/questions/52017874/how-to-keep-flex-box-items-widths-independent-of-its-content

标签

html

css

css3

flexbox