Flexbox menu and table with header - is it possible to cut header by table width?-CodePudding

I'd like to achieve something like this with flexbox css. Menu is fixed width, but table can grow, and the header should not exceed table width, even if it is too long. In other words table should be able to stratch column container, but header should not.

 ---- -------- 
|menu| header |
|     -------- 
|    | table  |
 ---- --------

It's easy with just one flex column.

<html>
<style>
    td {
        font-size: 60px;

    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;

    }
    .item2 {
        background-color: blue;

    }
</style>
<body>

<div >
  <div >Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
  <div >
    <table>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </table>

  </div>
</div>
</body>
</html>

But when menu added nothing works fine, header is not cut.

<html>
<style>
    .main {
        display: flex;
    }
    .menu {
        background-color: #222222;
        width: 200px;
    }

    td {
        font-size: 60px;
    }

    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;

    }

    .item2 {
        background-color: blue;

    }
</style>
<body>
<div >
  <div >
    menu
  </div>

  <div >
    <div >Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div >
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

CodePudding user response：

One way is to cut .menu width from .main width:

<style>
    .main {
        display: flex;
        --menu-width: 4em;
        width: calc(100% - var(--menu-width));
    }
    .menu {
        background-color: #222222;
        min-width: var(--menu-width);
    }

    td {
        font-size: 60px;
    }

    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
    }

    .item2 {
        background-color: blue;
    }
</style>

<div >
  <div >
    menu
  </div>

  <div >
    <div >Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div >
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>

CodePudding user response：

So you want the header containing element to grow / shrink with its sibling element, but not its own children.

The only method I can see is to wrap the header text in an appropriate element – <span> in this example – and then use position: absolute on it to pull the text out of the flow, placing position: relative on the header parent. You then would have to give the header some height.

Example

I replaced the width with flex: 0 0 200px. This will make the menu not grow or shrink and stick it at 200px always.

.main {
  display: flex;
}

.menu {
  background-color: #222222;
  flex: 0 0 200px; /*changed*/
}

td {
  font-size: 60px;
}

.container {
  font-size: 60px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  width: maxwidth; /*changed width to maxwidth*/
}

.item1 {
  background-color: red;
  white-space: nowrap;
  overflow: hidden;
  position: relative; /*added*/
  height: 1.2em; /*added*/
}

.item1 span {
  position: absolute; /*added*/
}

.item2 {
  background-color: blue;
}

<div >
  <div >
    menu
  </div>

  <div >
    <div ><span>The quick brown fox jumped over the lazy dog</span></div>
    <div >
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>