Margin right not working inside flexbox to take child outside parent

user_16088994 0
Viewed 268

I have a text editor where there is an image tool which has an inset feature which adds margin on left and right but only margin left is working if you want to take the image outside the parent container but margin right just stops at the edge of the container

.draft-bg {
  padding-top: 10px;
  padding-bottom: 1px;
}

.image-parent-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0rem;
}

.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

img {
  width: 100%;
  height: auto;
  margin-right: 1000px;
  margin-left: 0px;
}
<div class="draft-bg">
  <div class="image-parent-container">
    <div class="image-parent">
      <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>

css html
1 Answers

From the specification:

the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.

So in your case the big margin-right is creating the "over-constrained" part so it will get ignored. You can also see that it depends on the direction.

If you change the direction to rtl this won't happen and your element will get outside it parent container:

.draft-bg {
  padding-top: 10px;
  padding-bottom: 1px;
}

.image-parent-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0rem;
}

.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  direction:rtl;
}

img {
  width: 100%;
  height: auto;
  margin-right: 1000px;
  margin-left: 0px;
}
<div class="draft-bg">
  <div class="image-parent-container">
    <div class="image-parent">
      <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>

user_86203330
Related