0

I have a container with flex. I wanted middle child to fill all possible width with flex-grow: 1. But if there is a huge content even with overflow: hidden, it goes out of the max-width of container. max-width: 100% for middle element works (sets the width strictly) but I can't use that, because I have side elements that can have different widths from time to time.

.container {
        max-width: 300px;
        height: 90px;
        background-color: red;
        display: flex;
      }

      .item-x {
        min-width: 42px;
        height: 100%;
        background-color: green;
      }

      .item-y {
        margin: 10px;
        padding: 10px;
        flex-grow: 1;
        background: purple;
      }

      .item-y-inner {
        background: orangered;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>example</title>
  </head>

  <body>
    <div class="container">
      <div class="item-x">X</div>
      <div class="item-y">
        <div class="item-y-inner">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus,
          dolor ac volutpat porta
        </div>
      </div>
      <div class="item-x">X</div>
    </div>
  </body>
</html>

How to say middle element to fill all possible space but not greater than parent container width - side container widths

Stanislau Listratsenka
  • 522
  • 4
  • 14
  • You need to remove `white-space: nowrap;` from `.item-y-inner`, because with this rule you prevent line break for text and that's why whole container goes out of the max width. – qiqqq Mar 28 '23 at 12:19
  • 1
    add `overflow-hidden` to `item-y` and your ellipsis will work. I think it's because you don't have a width constraint on either y or inner so it will just grow and ignore the overflow hidden of the inner – Pete Mar 28 '23 at 12:27
  • min-width:0 to item-y – Temani Afif Mar 28 '23 at 12:31

0 Answers0