Display types are overridden by unknown source

Question

I have a container that contains three elements: one image and two divs:

I want all images to be inline blocks and have specified so in their classes:

 .first_image {
        display: inline-block;
        height: 20px;
        width: 20px;
 }
 .first_div {
        width: 100%;
        display: inline-block;
 }
 .second_div {
        width: 52px !important;
        height: 40px !important;
        display: inline-block;
        background-color: #3798D4;
 }
 .container {
        display: inline-flex;
 }

However, when I run and inspect, these are the actual attributes:

1. The container (class case-input is .container)

2. The first image

3. The first div

4. The last div (this one has class .edit_pen_container and contains a button)

The issue is that 1. displays as flex although it should be inline-flex, 2., 3., and 4. display as block although they should be inline-block. I really don't see why it changes. Also, the property is not crossed out, so it doesn't seem to be overridden.

By the way, so you can understand my logic, img will stay there, div 1 has a width of 100% because it has to take the rest of the div. When a user puts the mouse in div 1, div 2 appears and will take a fixed width (52px) and div 1 will shrink to allow div 2 to take the space it needs. Maybe my logic is wrong but this is what I want to do.

All HTML elements have been added through javascript, so I don't have a DOM hierarchy to show.

Answer 1

You wrote:

The issue is that 1. displays as flex although it should be inline-flex, 2., 3., and 4. display as block although they should be inline-block... Also, the property is not crossed out, so it doesn't seem to be overridden.

So let's clarify:

• Element #1 (.container) is a flex container. You're saying the problem is that you declared display: inline-flex, but the browser is rendering the element as display: flex.

• Elements #2, #3 and #4 are the in-flow children of #1. This means they are flex items. You're saying the problem is that you've set these items to display: inline-block, but the browser is rendering them as display: block.

---

Okay. Let's cover these two points one-by-one.

Why is display: inline-flex computing to display: flex?

Because that's what the flexbox specification requires.

§ 3. Flex Containers: the flex and inline-flex display values

If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column.

So inline-flex computes to flex in certain situations, as described in the table linked to in the excerpt above. That's what is happening in your code. Technically, it is not an override, which is why you're not seeing inline-flex crossed out.

---

Why is display: inline-block computing to display: block on flex items?

Again, because that's what the flexbox specification requires.

§ 4. Flex Items

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

Also note that you cannot control the display value of flex items. Once you make an element a flex container, the display property on flex items is controlled by the flex algorithm. Attempts to set a display rule on flex items are ignored by the browser. That's what you're seeing in your code: display: inline-block is being ignored (but, again, technically not overridden, which is why inline-block is not crossed out).

Answer 2

There is a great discussion already on Stack Overflow on the difference between flex and inline-flex. It is an important read and will help in this discussion.

Basically, inline-flex means the container will be inline, whereas flex means the container will be block-level. Here's the key, in both cases, the children are flex-items. They will behave in a certain way with certain defaults in place to fit the flex model. You have to style them differently, in some ways, than regular block or inline elements.

See the snippet below for an example.

.first_image {
   display: inline-block;
   height: 20px;
   width: 20px;
}
.first_div {
   width: 100%;
   display: inline-block;
}

.first_div_expanding {
  flex: 1;
}
.second_div {
   width: 52px !important;
   height: 40px !important;
   display: inline-block;
   background-color: #3798D4;
}
.container {
    display: inline-flex;
}
.flex-container {
    display: flex;
}

.set-sized-flex-container {
    display: inline-flex;
    width: 75%;
}

<h1>Inline-flex</h1>
<p>The flex container only takes up as much space as it needs and will not force a new line.</p>
<div class='container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">No expansion</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Flex</h1>
<p>The flex container will take the full-width of the screen</p>
<div class='flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div">I expand full-width</div>
  <div class="second_div"></div>
</div>
<hr>
<h1>Expanding first_div with Inline-Flex</h1>
<div class='set-sized-flex-container'>
  <img src="https://via.placeholder.com/20x20" class="first-image">
  <div class="first_div_expanding">I expand to take up remaining space</div>
  <div class="second_div"></div>
</div>