div is not displaying as a flexbox

Question

I have a div within a webpage I am trying to target with the following code to create a flexbox:

div.my-div-class {
    display: flex;
    flex-wrap: wrap;
}


div.my-div-class > label {
    fl

Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:

div {
display: inherit;
}

Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.

I check the console, and sure enough see:

div { display: inherit; }

instead of what was there before for the User Agent which was:

div {display: block;}

Which is what I assumed was messing with my style originally.

I tried !important to see if that would at least cause a change and it didn't.

So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.

Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:

<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>

Answer 1

It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.

If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.

For example:

.parentElement {
  display: flex;
  background: yellow;
  height: 200px;
  width: 100%;
}

.childElement {
  display: flex;
  height: 100px;
  width: 70%;
  background: blue;
}

.childElement:hover {
  height: inherit;
}

<div class="parentElement">
  <div class="childElement">
  </div>
</div>

In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.

In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.

Answer 2

Generally you don't really need to target the div tag, you should instead use a class.

If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.

To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.

Just target whatever you need to be flex with the class name, such as:

.my-div-class {
  display: flex
}