БЛОГ НА HUSL


Flex растянуть (но не больше)

Автор вопроса: kitsoRik

Есть два компонента (А, Б) которые лежат в компоненте с display: flex, А - всегда фиксированной ширины, а компонент Б должен заполнить все остальное. Но Б так же display: flex, и в нем есть компонент в котором много квадратиков, и мне нужно что бы этот компонент (при нехватке места для квадратов) начал прокручиваться по себе а не растягивать родителя (появляеться горизонтальная прокрутка)

.root {
  width: 100%;
  display: flex;
}

.A {
  min-width: 280px;
  height: 100%;
  background: green;
}

.B {
  flex-grow: 1;
  height: 100%;
  background: yellow;
  
  display: flex;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  width: 32px;
  height: 32px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
  </head>
  <body>
    <div class="root">
      <div class="A">
        1
      </div>
      <div class="B">
        <div class="wrapper">
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
            <div class="wrapper-item" style="background: red"></div>
            <div class="wrapper-item" style="background: blue"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Вот: https://jsfiddle.net/pmz9o08s/8/ , но там прокрутка появляется на странице, а не на wrapper'e


Источник

Ответы (1 шт):

Автор решения: hu-fo

Вариант 1.

:root {
  --a-width: 280px;
}

.root {
  width: 100%;
  display: flex;
}

.A {
  min-width: var(--a-width);
  height: 100%;
  background: green;
}

.B {
  flex-grow: 1;
  max-width: calc(100% - var(--a-width));
  background: yellow;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  min-width: 32px;
  height: 32px;
}
<div class="root">
  <div class="A">
    1
  </div>
  <div class="B">
    <div class="wrapper">
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
    </div>
  </div>
</div>

Вариант 2.

.root {
  width: 100%;
  display: flex;
}

.A {
  background: green;
}

.B {
  background: yellow;
  overflow: hidden;
}

.wrapper {
  display: flex;
  overflow: auto;
}

.wrapper-item {
  min-width: 32px;
  height: 32px;
}
<div class="root">
  <div class="A">
    1333333
  </div>
  <div class="B">
    <div class="wrapper">
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
      <div class="wrapper-item" style="background: red"></div>
      <div class="wrapper-item" style="background: blue"></div>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.