Flex container 2 items set width 3 auto, 3 items divide width equally-CodePudding

I have a flex container with 5 divs in it:

<div class="container">
  <div class="item logo"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item about-us"></div>
</div>

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

.item {
  dispaly: flex;
  height: 200px;
  width: auto;
}

.logo {
  width: 580px;
}

.about-us {
  width: 200px;
}

This is a header, so the container basically takes 100% width of the page. Both logo and about-us have the correct width, but the other 3 items, have width equal to their content, and I want them to have the remaining width equally divided between them. So in this case, I am looking at them at 1920px width, when we remove the logo and about-us width since they are static, we are left with 1920-580-200=1140 / 3 = 380px per remaining item. So how do I make them get that width automatically?

 .container {
      display: flex;
      width: 100%;
      background-color: black;
    }
    
    .item {
      dispaly: flex;
      height: 200px;
      width: auto;
      background-color: red;
    }
    
    .logo {
      width: 180px;
      background-color: green;
    }
    
    .about-us {
      width: 50px;
      background-color: blue;
    }

    <div class="container">
      <div class="item logo"></div>
      <div class="item">Text1</div>
      <div class="item">Text2</div>
      <div class="item">Text3</div>
      <div class="item about-us"></div>
    </div>

CodePudding user response：

I have modified your html and css also. Try this code. It is Responsive. You can change the screen size. I give 580px for logo, 200 for about us and the rest is equally divided between the middle three items. You can change the width of logo and about us.

.container {
  display: flex;
  width: 100%;
  background-color: black;
}

.item {
  height: 200px;
  flex-basis: auto;
  flex-grow: 1;
  background-color: red;
}

.logo {
  flex-basis: 580px;
  background-color: green;
}

.about-us {
  flex-basis: 200px;
  background-color: blue;
}

  <div class="container">
    <div class="logo"></div>
    <div class="item">Text1</div>
    <div class="item">Text2</div>
    <div class="item">Text3</div>
    <div class="about-us"></div>
  </div>

CodePudding user response：

Apply a flex-grow property as 1 to class .item so that remaining area of container is covered and spanning area don't limit to text width only.

.container {
  display: flex;
  width: 100%;
  background-color: black;
}

.item {
  display: flex;
  flex-grow: 1;
  height: 200px;
  background-color: red;
  border: 2px solid white;
}

.logo {
  width: 180px;
  background-color: green;
}

.about-us {
  width: 50px;
  background-color: blue;
}

<div class="container">
  <div class="item logo"></div>
  <div class="item">Text1</div>
  <div class="item">Text2</div>
  <div class="item">Text3</div>
  <div class="about-us"></div>
</div>

CodePudding user response：

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

.logo {
  flex: 0 0 180px;
  background-color: green;
}

.rest {
  display: flex;
  flex: 1 1 auto;
}

.subitem {
  background-color: red;
 flex: 1 1 auto;
}


.about-us {
  flex: 0 0 50px;
  background-color: blue;
}

<div class="container">
  <div class="item logo"></div>
  <div class="item rest">
    <div class="subitem">Text1</div>
    <div class="subitem">Text2</div>
    <div class="subitem">Text3</div>
  </div>
  <div class="item about-us"></div>
</div>

CodePudding user response：

Typo in this snippet:

    .item {
      dispaly: flex;