E
E
EmKotlety2021-07-18 06:40:46
css
EmKotlety, 2021-07-18 06:40:46

Why does the flex-grow width property for a container stop working after the parent block is aligned?

The container block must be fluid. Elements with the .block class must fill the entire width of the free space. And it works as long as I don't center the parent .container with margin: 0 auto;

@import "normalize.css";

.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: springgreen;
}

.container {
  display: flex;
  flex-direction: row;
  max-width: 300px;
  border: 1px solid black;
  flex-grow: 1;
  margin: 0 auto; /* Проблема с шириной после этого свойства */
}

.block {
  display: flex;
  flex-grow: 1;
  border: 1px solid black;
  justify-content: space-between;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: slateblue;
}


<body>
  <div class="wrapper">

    <div class="container">
      <div class="block">1</div>
      <div class="block center">2</div>
      <div class="block">3</div>
    </div>

    <footer>gsdsdg</footer>
  </div>
</body>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ivan Grishov, 2021-07-18
@IvanGrishov

Ready. Give the container width: 100%;

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question