need to use flex based property instead of width-CodePudding

I have one div where i have to show background and background till 70% of the page

so for the div i tried

.transaction {
    width: calc(100% - 25%);
}

my div looks like this

<div >Code goes here</div>

working perfect, but instead of width, i want to have flex calculate that width and display it, i want to keep the usage of width to be very very minimum until i cannot do something from flexbox and only then i should be able to use the width

CodePudding user response：

You need to add to the children a definition of flex-basis: 70%;

.parent {
  display: flex;
}

.child {
  flex-basis: 70%;
  background: yellow;
}

<div >
  <div >code goes here</div>
</div>

CodePudding user response：

By default the items inside of flex will fit the content. You can set a max-width that is relative to its container width. You don't need a calc() when you know the final output unit.

section {
  display: flex;
}

div {
  background: tomato;
  max-width: 70%;
}

<section>
  <div>This is some content with a max width of 70%</div>
</section>