Flexbox: Even-width items, unless one item overflows its container?-CodePudding

I'm looking to create a layout of two blocks, side by side, possibly within a flex box. The blocks can contain dynamic text. In most cases, I'd like the blocks to be identically sized. I've found this straightforward by setting flex: 1 on each item. Looks like:

However, in the case where one item has contents that overflows its box (say a longer string within), then if the other box has extra space, the overflowing box should take that extra space (but only when it needs it). See: https://codepen.io/benrhere/pen/KKZyBdj

<ul >
  <li >This is some text</li>
  <li >This is also some text which overflows</li>
</ul>

(Same CSS as above, and almost same HTML but longer string within second Currently, the overflow is not visible because the box can't take more than 50%, which makes sense).

Is this possible to achieve this dynamic behavior entirely within CSS? Is Flexbox well suited for this situation?

Thanks...

CodePudding user response：

This will solve your problem.

flex-basis:100%; basically said both flex childs go and get 100% width of parent(screen width) but they can only get 50% because both siblings try to get 0. You can use flex-basis:50% that will work too because you want all child containers 50% of screen width but if you go to flex-basis:35%; both container will only use 70% of screen.

white-space:nowrap; make text in div not wrap.

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}


body {
  min-height: 100vh;
  background-color: bisque;
  margin: 0;
  
}

ul,li
{
  margin:0;
  display: block;
  padding: 0;
}


.flex-container {
  display: flex;
  flex-direction: row;
  list-style: none;
}


.flex-item {
background-color: tomato;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
margin:1rem;
padding: 1rem;
white-space:nowrap;
flex-basis: 100%;
height: 10rem;
display: flex;
flex-direction: column;
justify-content: center;
}

<div >
      <ul >
        <li >
          Lorem ipsum dolor sit amet consectetur</
        </li>
        <li >
         This
        </li>
      </ul>
</div>

CodePudding user response：

I think you are looking for flex: auto

e.g.

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   *
  
  /* Then we define how is distributed the remaining space */
  justify-content: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  flex: auto;
  background: tomato;
  padding: 5px;
  rwidth: 0;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  flex-grow: 1;
}

<ul >
  <li >This is some text and a lot more of it</li>
  <li >This</li>
</ul>